<!DOCTYPE html>


<html lang="zh-Hans">


<head>
  <meta charset="utf-8" />
   
  <meta name="keywords" content="代码,生活,杂记,思考" />
   
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
  <title>
    css复习汇总 |  AURORA
  </title>
  <meta name="generator" content="hexo-theme-ayer">
  
  <link rel="shortcut icon" href="/favicon.ico" />
  
  
<link rel="stylesheet" href="/dist/main.css">

  
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css">

  
<link rel="stylesheet" href="/css/custom.css">

  
  
<script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>

  
  

  

<link rel="alternate" href="/atom.xml" title="AURORA" type="application/atom+xml">
</head>

</html>

<body>
  <div id="app">
    
      
    <main class="content on">
      <section class="outer">
  <article
  id="post-css复习汇总"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h1 class="article-title sea-center" style="border-left:0" itemprop="name">
  css复习汇总
</h1>
 

    </header>
     
    <div class="article-meta">
      <a href="/2020/03/16/css%E5%A4%8D%E4%B9%A0%E6%B1%87%E6%80%BB/" class="article-date">
  <time datetime="2020-03-15T16:00:00.000Z" itemprop="datePublished">2020-03-16 00:03:00</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E6%8A%80%E6%9C%AF/">技术</a> / <a class="article-category-link" href="/categories/%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF/">前端</a> / <a class="article-category-link" href="/categories/%E6%8A%80%E6%9C%AF/%E5%89%8D%E7%AB%AF/%E9%9D%A2%E7%BB%8F%E7%AC%94%E7%BB%8F/">面经笔经</a>
  </div>
  
<div class="word_count">
    <span class="post-time">
        <span class="post-meta-item-icon">
            <i class="ri-quill-pen-line"></i>
            <span class="post-meta-item-text"> Word count:</span>
            <span class="post-count">18.2k</span>
        </span>
    </span>

    <span class="post-time">
        &nbsp; | &nbsp;
        <span class="post-meta-item-icon">
            <i class="ri-book-open-line"></i>
            <span class="post-meta-item-text"> Reading time≈</span>
            <span class="post-count">66 min</span>
        </span>
    </span>
</div>
 
    </div>
      
    <div class="tocbot"></div>




  
    <div class="article-entry" itemprop="articleBody">
       
  <h1 id="CSS-面试知识点总结"><a href="#CSS-面试知识点总结" class="headerlink" title="CSS 面试知识点总结"></a>CSS 面试知识点总结</h1><p>本文搬运自<a href="https://github.com/CavsZhouyou/Front-End-Interview-Notebook" target="_blank" rel="noopener" title="CavsZhouyou">CavsZhouyou</a>的github</p>
<p>本部分主要是笔者在复习 CSS 相关知识和一些相关面试题时所做的笔记，如果出现错误，希望大家指出！</p>
<a id="more"></a>
<h2 id="1-介绍一下标准的-CSS-的盒子模型？低版本-IE-的盒子模型有什么不同的？"><a href="#1-介绍一下标准的-CSS-的盒子模型？低版本-IE-的盒子模型有什么不同的？" class="headerlink" title="1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？"></a>1.介绍一下标准的 CSS 的盒子模型？低版本 IE 的盒子模型有什么不同的？</h2><blockquote>
<p>（1）有两种盒子模型：IE盒模型（border-box）、W3C标准盒模型（content-box）<br>（2）盒模型：分为内容（content）、填充（padding）、边界（margin）、边框（border）四个部分</p>
</blockquote>
<p>IE盒模型和W3C标准盒模型的区别：</p>
<blockquote>
<p>（1）W3C标准盒模型：属性width，height只包含内容content，不包含border和padding<br>（2）IE盒模型：属性width，height包含content、border和padding，指的是content+padding+border。</p>
</blockquote>
<blockquote>
<p>在ie8+浏览器中使用哪个盒模型可以由box-sizing（CSS新增的属性）控制，默认值为content-box，即标准盒模型；<br>如果将box-sizing设为border-box则用的是IE盒模型。</p>
</blockquote>
<blockquote>
<p>如果在ie6，7，8中DOCTYPE缺失会将盒子模型解释为IE盒子模型。若在页面中声明了DOCTYPE类型，所有的浏览器都会把盒模型解释为W3C盒模型。</p>
</blockquote>
<h2 id="2-CSS-选择符有哪些？"><a href="#2-CSS-选择符有哪些？" class="headerlink" title="2.CSS 选择符有哪些？"></a>2.CSS 选择符有哪些？</h2><blockquote>
<p>（1）id选择器（#myid）<br>（2）类选择器（.myclassname）<br>（3）标签选择器（div,h1,p）<br>（4）后代选择器（h1p）<br>（5）相邻后代选择器（子）选择器（ul&gt;li）<br>（6）兄弟选择器（li~a）<br>（7）相邻兄弟选择器（li+a）<br>（8）属性选择器（a[rel=”external”]）<br>（9）伪类选择器（a:hover,li:nth-child）<br>（10）伪元素选择器（::before、::after）<br>（11）通配符选择器（*）</p>
</blockquote>
<h2 id="3-before-和-after-中双冒号和单冒号有什么区别？"><a href="#3-before-和-after-中双冒号和单冒号有什么区别？" class="headerlink" title="3.::before 和:after 中双冒号和单冒号有什么区别？"></a>3.::before 和:after 中双冒号和单冒号有什么区别？</h2><blockquote>
<p>在css3中使用单冒号来表示伪类，用双冒号来表示伪元素。但是为了兼容已有的伪元素的写法，在一些浏览器中也可以使用单冒号来表示伪元素。</p>
</blockquote>
<blockquote>
<p>伪类一般匹配的是元素的一些特殊状态，如hover、link等，而伪元素一般匹配的特殊的位置，比如after、before等。</p>
</blockquote>
<h2 id="4-伪类与伪元素的区别"><a href="#4-伪类与伪元素的区别" class="headerlink" title="4.伪类与伪元素的区别"></a>4.伪类与伪元素的区别</h2><blockquote>
<p>伪类用于当已有的元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。比如说，当用户悬停在指定的<br>元素时，我们可以通过:hover来描述这个元素的状态。</p>
</blockquote>
<blockquote>
<p>伪元素用于创建一些不在文档树中的元素，并为其添加样式。它们允许我们为元素的某些部分设置样式。比如说，我们可以通过::before来在一个元素前增加一些文本，并为这些文本添加样式。虽然用户可以看到这些文本，但是这些文本实际上不在文档树中。</p>
</blockquote>
<h2 id="5-CSS-中哪些属性可以继承？"><a href="#5-CSS-中哪些属性可以继承？" class="headerlink" title="5.CSS 中哪些属性可以继承？"></a>5.CSS 中哪些属性可以继承？</h2><blockquote>
<p>（1）字体系列属性<br>font、font-family、font-weight、font-size、font-style、font-variant、font-stretch、font-size-adjust<br>（2）文本系列属性<br>text-indent、text-align、text-shadow、line-height、word-spacing、letter-spacing、<br>text-transform、direction、color<br>（3）表格布局属性<br>caption-sideborder-collapseempty-cells<br>（4）列表属性<br>list-style-type、list-style-image、list-style-position、list-style<br>（5）光标属性<br>cursor<br>（6）元素可见性<br>visibility<br>（7）还有一些不常用的；speak，page，设置嵌套引用的引号类型quotes等属性</p>
</blockquote>
<p>回答简版</p>
<blockquote>
<p>一般具有继承性的属性有，字体相关的属性，font-size和font-weight等。文本相关的属性，color和text-align等。<br>表格的一些布局属性、列表属性如list-style等。还有光标属性cursor[ˈkɜːsə(r)]<br>、元素可见性visibility。</p>
</blockquote>
<blockquote>
<p>当一个属性不是继承属性的时候，我们也可以通过将它的值设置为inherit来使它从父元素那获取同名的属性值来继承。</p>
</blockquote>
<h2 id="6-CSS-优先级算法如何计算？"><a href="#6-CSS-优先级算法如何计算？" class="headerlink" title="6.CSS 优先级算法如何计算？"></a>6.CSS 优先级算法如何计算？</h2><p>使用特殊性进行计算</p>
<blockquote>
<p>第一个等级是行内样式，为1000，第二个等级是id选择器，为100，第三个等级是类选择器、伪类选择器和属性选择器，为10，第四个等级是元素选择器和伪元素选择器，为1。规则中每出现一个选择器，就将它的特殊性进行叠加，这个叠加只限于对应的等级的叠加，不会产生进位</p>
</blockquote>
<blockquote>
<p>如果两个规则的特殊性值相等的时候，那么就会根据它们引<br>入的顺序，后出现的规则的优先级最高。</p>
</blockquote>
<h2 id="7-关于四种伪类-LVHA-顺序的解释"><a href="#7-关于四种伪类-LVHA-顺序的解释" class="headerlink" title="7.关于四种伪类 LVHA 顺序的解释?"></a>7.关于四种伪类 LVHA 顺序的解释?</h2><blockquote>
<p>a标签有四种状态：链接访问前、链接访问后、鼠标滑过、激活，分别对应四种伪类:link、:visited、:hover、:active；</p>
</blockquote>
<p>当链接未访问过时：</p>
<blockquote>
<p>（1）当鼠标滑过a链接时，满足:link和:hover两种状态，要改变a标签的颜色，就必须将:hover伪类在:link伪<br>类后面声明；<br>（2）当鼠标点击激活a链接时，同时满足:link、:hover、:active三种状态，要显示a标签激活时的样式（:active），<br>必须将:active声明放到:link和:hover之后。<strong>因此得出LVHA这个顺序</strong>。</p>
</blockquote>
<p>当链接访问过时</p>
<blockquote>
<p>情况基本同上，只不过需要将:link换成:visited。</p>
</blockquote>
<blockquote>
<p>这个顺序能不能变？可以，但也只有:link和:visited可以交换位置，因为一个链接要么访问过要么没访问过，不可能同时满足，<br>也就不存在覆盖的问题。</p>
</blockquote>
<h1 id="8-CSS3-新增伪类有那些？"><a href="#8-CSS3-新增伪类有那些？" class="headerlink" title="8.CSS3 新增伪类有那些？"></a>8.CSS3 新增伪类有那些？</h1><blockquote>
<p>（1）elem:nth-child(n)选中父元素下的第n个子元素，并且这个子元素的标签名为elem，n可以接受具体的数<br>值，也可以接受函数。</p>
</blockquote>
<blockquote>
<p>（2）elem:nth-last-child(n)作用同上，不过是从后开始查找。</p>
</blockquote>
<blockquote>
<p>（3）elem:last-child选中最后一个子元素。</p>
</blockquote>
<blockquote>
<p>（4）elem:only-child如果elem是父元素下唯一的子元素，则选中之。</p>
</blockquote>
<blockquote>
<p>（5）elem:nth-of-type(n)选中父元素下第n个elem类型元素，n可以接受具体的数值，也可以接受函数。</p>
</blockquote>
<blockquote>
<p>（6）elem:first-of-type选中父元素下第一个elem类型元素。</p>
</blockquote>
<blockquote>
<p>（7）elem:last-of-type选中父元素下最后一个elem类型元素。</p>
</blockquote>
<blockquote>
<p>（8）elem:only-of-type如果父元素下的子元素只有一个elem类型元素，则选中该元素。</p>
</blockquote>
<blockquote>
<p>（9）elem:empty选中不包含子元素和内容的elem类型元素。</p>
</blockquote>
<blockquote>
<p>（10）elem:target选择当前活动的elem元素。</p>
</blockquote>
<blockquote>
<p>（11）:not(elem)选择非elem元素的每个元素。</p>
</blockquote>
<blockquote>
<p>（12）:enabled    控制表单控件的禁用状态。</p>
</blockquote>
<blockquote>
<p>（13）:disabled        控制表单控件的禁用状态。</p>
</blockquote>
<blockquote>
<p>(14):checked单选框或复选框被选中。</p>
</blockquote>
<h2 id="9-如何居中-div？"><a href="#9-如何居中-div？" class="headerlink" title="9.如何居中 div？"></a>9.如何居中 div？</h2><p>回答总结<br>一般常见的几种居中的方法有：<br>对于宽高固定的元素</p>
<blockquote>
<p>（1）我们可以利用margin:0auto来实现元素的水平居中。<br>（2）利用绝对定位，设置四个方向的值都为0，并将margin设置为auto，由于宽高固定，因此对应方向实现平分，可以实现水平和垂直方向上的居中。<br>（3）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过margin负值来调整元素的中心点到页面的中心。<br>（4）利用绝对定位，先将元素的左上角通过top:50%和left:50%定位到页面的中心，然后再通过translate来调整元素的中心点到页面的中心。<br>（5）使用flex布局，通过align-items:center和justify-content:center设置容器的垂直和水平方向上为居中对齐，然后它的子元素也可以实现垂直和水平的居中。</p>
</blockquote>
<blockquote>
<p>对于宽高不定的元素，上面的后面两种方法，可以实现元素的垂直和水平的居中。</p>
</blockquote>
<h2 id="10-display-有哪些值？说明他们的作用。"><a href="#10-display-有哪些值？说明他们的作用。" class="headerlink" title="10.display 有哪些值？说明他们的作用。"></a>10.display 有哪些值？说明他们的作用。</h2><blockquote>
<p>block    块类型。默认宽度为父元素宽度，可设置宽高，换行显示。<br>none    元素不显示，并从文档流中移除。<br>inline    行内元素类型。默认宽度为内容宽度，不可设置宽高，同行显示。<br>inline-block默认宽度为内容宽度，可以设置宽高，同行显示。<br>list-item    像块类型元素一样显示，并添加样式列表标记。<br>table    此元素会作为块级表格来显示。<br>inherit    规定应该从父元素继承display属性的值。</p>
</blockquote>
<h2 id="11-position-的值-relative-和-absolute-定位原点是？"><a href="#11-position-的值-relative-和-absolute-定位原点是？" class="headerlink" title="11.position 的值 relative 和 absolute 定位原点是？"></a>11.position 的值 relative 和 absolute 定位原点是？</h2><blockquote>
<p>relative定位的元素，是相对于元素本身的正常位置来进行定位的。</p>
</blockquote>
<blockquote>
<p>absolute定位的元素，是相对于它的第一个position值不为static的祖先元素的paddingbox来进行定位的,也就是说在计算定位距离的时候，padding的值也要算进去。</p>
</blockquote>
<h2 id="12-CSS3-有哪些新特性？（根据项目回答）"><a href="#12-CSS3-有哪些新特性？（根据项目回答）" class="headerlink" title="12.CSS3 有哪些新特性？（根据项目回答）"></a>12.CSS3 有哪些新特性？（根据项目回答）</h2><blockquote>
<p>新增各种CSS选择器    :not(.input)：所有class不是“input”的节点<br>圆角        （border-radius:8px）<br>多列布局    （multi-columnlayout）<br>阴影和反射    （Shadow\Reflect）<br>文字特效        （text-shadow）<br>文字渲染        （Text-decoration）<br>线性渐变        （gradient）<br>旋转            （transform）<br>缩放，定位，倾斜，动画，多背景</p>
</blockquote>
<h2 id="13-请解释一下-CSS3-的-Flexbox（弹性盒布局模型），以及适用场景？"><a href="#13-请解释一下-CSS3-的-Flexbox（弹性盒布局模型），以及适用场景？" class="headerlink" title="13.请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？"></a>13.请解释一下 CSS3 的 Flexbox（弹性盒布局模型），以及适用场景？</h2><blockquote>
<p>flex布局是CSS3新增的一种布局方式，我们可以通过将一个元素的display属性值设置为flex从而使它成为一个flex容器，它的所有子元素都会成为它的项目。</p>
</blockquote>
<blockquote>
<p>一个容器默认有两条轴，一个是水平的主轴，一个是与主轴垂直的交叉轴。我们可以使用flex-direction来指定主轴的方向。<br>我们可以使用justify-content来指定元素在主轴上的排列方式，使用align-items来指定元素在交叉轴上的排列方式。还<br>可以使用flex-wrap来规定当一行排列不下时的换行方式。</p>
</blockquote>
<blockquote>
<p>对于容器中的项目，我们可以使用order属性来指定项目的排列顺序，还可以使用flex-grow来指定当排列空间有剩余的时候，项目的放大比例。还可以使用flex-shrink来指定当排列空间不足时，项目的缩小比例。</p>
</blockquote>
<h2 id="14-用纯-CSS-创建一个三角形的原理是什么？"><a href="#14-用纯-CSS-创建一个三角形的原理是什么？" class="headerlink" title="14.用纯 CSS 创建一个三角形的原理是什么？"></a>14.用纯 CSS 创建一个三角形的原理是什么？</h2><blockquote>
<p>采用的是相邻边框连接处的均分原理。将元素的宽高设为0，只设置border，把任意三条边隐藏掉（颜色设为transparent），剩下的就是一个三角形。</p>
</blockquote>
<p><img src="https://img-blog.csdnimg.cn/20200319232212279.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTIwMzE5NTg=,size_16,color_FFFFFF,t_70" alt=""></p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-id">#demo</span> &#123;</span><br><span class="line">  <span class="attribute">width</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">height</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">border-width</span>: <span class="number">20px</span>;</span><br><span class="line">  <span class="attribute">border-style</span>: solid;</span><br><span class="line">  <span class="attribute">border-color</span>: transparenttransparentredtransparent;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="15-一个满屏品字布局如何设计"><a href="#15-一个满屏品字布局如何设计" class="headerlink" title="15.一个满屏品字布局如何设计?"></a>15.一个满屏品字布局如何设计?</h2><blockquote>
<p>上面的div宽100%，<br>下面的两个div分别宽50%，<br>然后用float或者inline使其不换行即可</p>
</blockquote>
<h2 id="16-CSS-多列等高如何实现？"><a href="#16-CSS-多列等高如何实现？" class="headerlink" title="16.CSS 多列等高如何实现？"></a>16.CSS 多列等高如何实现？</h2><blockquote>
<p>（1）利用padding-bottom|margin-bottom正负值相抵，不会影响页面布局的特点。设置父容器设置超出隐藏（overflow:hidden），这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则<br>父容器的高度被撑到里面最高那列的高度，其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">margin</span>: 0 10<span class="selector-tag">px</span> <span class="selector-tag">-9999px</span> 0;</span><br><span class="line"><span class="selector-tag">padding-bottom</span>: 9999<span class="selector-tag">px</span>;</span><br></pre></td></tr></table></figure></p>
</blockquote>
<blockquote>
<p>（2）利用table-cell所有单元格高度都相等的特性，来实现多列等高。</p>
</blockquote>
<p>?（3）利用flex布局中项目align-items属性默认为stretch，如果项目未设置高度或设为auto，将占满整个容器的高度<br>的特性，来实现多列等高。</p>
<h2 id="17-经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用-hack-的技巧？"><a href="#17-经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用-hack-的技巧？" class="headerlink" title="17.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？"></a>17.经常遇到的浏览器的兼容性有哪些？原因，解决方法是什么，常用 hack 的技巧？</h2><blockquote>
<p>png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8</p>
</blockquote>
<blockquote>
<p>浏览器默认的margin和padding不同。解决方案是加一个全局的*{margin:0;padding:0;}来统一,，但是全局效率很低，一般是如下这样解决：<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">body</span>,<span class="selector-tag">ul</span>,<span class="selector-tag">li</span>,<span class="selector-tag">ol</span>,<span class="selector-tag">dl</span>,<span class="selector-tag">dt</span>,<span class="selector-tag">dd</span>,<span class="selector-tag">form</span>,<span class="selector-tag">input</span>,<span class="selector-tag">h1</span>,<span class="selector-tag">h2</span>,<span class="selector-tag">h3</span>,<span class="selector-tag">h4</span>,<span class="selector-tag">h5</span>,<span class="selector-tag">h6</span>,<span class="selector-tag">p</span>&#123;</span><br><span class="line"><span class="attribute">margin</span>:<span class="number">0</span>;</span><br><span class="line"><span class="attribute">padding</span>:<span class="number">0</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><br>IE下,event对象有x,y属性,但是没有pageX,pageY属性</p>
</blockquote>
<blockquote>
<p>Firefox下,event对象有pageX,pageY属性,但是没有x,y属性</p>
</blockquote>
<h2 id="18-li-与-li-之间有看不见的空白间隔是什么原因引起的？有什么解决办法？"><a href="#18-li-与-li-之间有看不见的空白间隔是什么原因引起的？有什么解决办法？" class="headerlink" title="18.li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？"></a>18.li 与 li 之间有看不见的空白间隔是什么原因引起的？有什么解决办法？</h2><blockquote>
<p>浏览器会把inline元素间的空白字符（空格、换行、Tab等）渲染成一个空格。而为了美观。我们通常是一个<code>&lt;li&gt;</code>放在一行，这导致<code>&lt;li&gt;</code>换行后产生换行字符，它变成一个空格，占用了一个字符的宽度。</p>
</blockquote>
<p>解决方案</p>
<blockquote>
<p>（1）为<code>&lt;li&gt;</code>设置float:left。不足：有些容器是不能设置浮动，如左右切换的焦点图等。</p>
</blockquote>
<blockquote>
<p>（2）将所有<code>&lt;li&gt;</code>写在同一行。不足：代码不美观。</p>
</blockquote>
<blockquote>
<p>（3）将<code>&lt;ul&gt;</code>内的字符尺寸直接设为0，即font-size:0。不足：<code>&lt;ul&gt;</code>中的其他字符尺寸也被设为0，需要额外重新设定其他<br>字符尺寸，且在Safari浏览器依然会出现空白间隔。</p>
</blockquote>
<p>?（4）消除<code>&lt;ul&gt;</code>的字符间隔letter-spacing:-8px，不足：这也设置了<li>内的字符间隔，因此需要将<li>内的字符<br>间隔设为默认letter-spacing:normal。</p>
<h2 id="19-为什么要初始化-CSS-样式？"><a href="#19-为什么要初始化-CSS-样式？" class="headerlink" title="19.为什么要初始化 CSS 样式？."></a>19.为什么要初始化 CSS 样式？.</h2><blockquote>
<p>因为浏览器的兼容问题，不同浏览器对有些标签的默认值是不同的，如果没对CSS初始化往往会出现浏览器之间的页面显示差异。</p>
</blockquote>
<blockquote>
<p>当然，初始化样式会对SEO有一定的影响，但鱼和熊掌不可兼得，但力求影响最小的情况下初始化。</p>
</blockquote>
<h2 id="20-什么是包含块，对于包含块的理解"><a href="#20-什么是包含块，对于包含块的理解" class="headerlink" title="20.什么是包含块，对于包含块的理解?"></a>20.什么是包含块，对于包含块的理解?</h2><blockquote>
<p>包含块（containingblock）就是元素用来计算和定位的一个框。</p>
</blockquote>
<p>不同的定位方式，包含块的选择也不一样</p>
<blockquote>
<p>（1）根元素（很多场景下可以看成是<code>&lt;html&gt;</code>）被称为“初始包含块”，其尺寸等同于浏览器可视窗口的大小。</p>
</blockquote>
<blockquote>
<p>（2）对于其他元素，如果该元素的position是relative或者static，则“包含块”由其最近的块容器祖先盒的contentbox边界形成。</p>
</blockquote>
<blockquote>
<p>（3）如果元素position:fixed，则“包含块”是“初始包含块”。</p>
</blockquote>
<blockquote>
<p>（4）如果元素position:absolute，则“包含块”由最近的position不为static的祖先元素的paddingbox建立</p>
</blockquote>
<h2 id="CSS-里的-visibility-属性有个-collapse-属性值是干嘛用的"><a href="#CSS-里的-visibility-属性有个-collapse-属性值是干嘛用的" class="headerlink" title="CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的"></a>CSS 里的 visibility 属性有个 collapse 属性值是干嘛用的</h2><blockquote>
<p>（1）对于一般的元素，它的表现跟visibility：hidden;是一样的。元素是不可见的，但此时仍占用页面空间。<br>（2）但例外的是，如果这个元素是table相关的元素，例如table行，tablegroup，table列，tablecolumngroup，它的表现却跟display:none一样，也就是说，它们占用的空间也会释放。</p>
</blockquote>
<p>不同浏览器下的表现</p>
<blockquote>
<p>在谷歌浏览器里，使用collapse值和使用hidden值没有什么区别。</p>
</blockquote>
<blockquote>
<p>在火狐浏览器、Opera和IE11里，使用collapse值的效果就如它的字面意思：table的行会消失，它的下面一行会补充它的位置。</p>
</blockquote>
<h2 id="22-width-auto-和-width-100-的区别"><a href="#22-width-auto-和-width-100-的区别" class="headerlink" title="22.width:auto 和 width:100%的区别"></a>22.width:auto 和 width:100%的区别</h2><blockquote>
<p>width:100%会使元素box的宽度等于父元素的contentbox的宽度。</p>
</blockquote>
<blockquote>
<p>width:auto会使元素撑满整个父元素，margin、border、padding、content区域会自动分配水平空间。</p>
</blockquote>
<h2 id="23-绝对定位元素与非绝对定位元素的百分比计算的区别"><a href="#23-绝对定位元素与非绝对定位元素的百分比计算的区别" class="headerlink" title="23.绝对定位元素与非绝对定位元素的百分比计算的区别"></a>23.绝对定位元素与非绝对定位元素的百分比计算的区别</h2><blockquote>
<p>绝对定位元素的宽高百分比是相对于临近的position不为static的祖先元素的paddingbox来计算的。</p>
</blockquote>
<blockquote>
<p>非绝对定位元素的宽高百分比则是相对于父元素的contentbox来计算的。</p>
</blockquote>
<h2 id="24-简单介绍使用图片-base64-编码的优点和缺点。"><a href="#24-简单介绍使用图片-base64-编码的优点和缺点。" class="headerlink" title="24.简单介绍使用图片 base64 编码的优点和缺点。"></a>24.简单介绍使用图片 base64 编码的优点和缺点。</h2><p>使用base64的优点是：</p>
<blockquote>
<p>（1）减少一个图片的HTTP请求</p>
</blockquote>
<p>使用base64的缺点是：</p>
<blockquote>
<p>（1）根据base64的编码原理，编码后的大小会比原文件大小大1/3，如果把大图片编码到html/css中，不仅会造成文件体积的增加，影响文件的加载速度，还会增加浏览器对html或css文件解析渲染的时间。</p>
</blockquote>
<blockquote>
<p>（2）使用base64无法直接缓存，要缓存只能缓存包含base64的文件，比如HTML或者CSS，这相比域直接缓存图片的效果要差很多。</p>
</blockquote>
<blockquote>
<p>（3）兼容性的问题，ie8以前的浏览器不支持。</p>
</blockquote>
<h2 id="25-’display’、’position’和’float’的相互关系？"><a href="#25-’display’、’position’和’float’的相互关系？" class="headerlink" title="25.’display’、’position’和’float’的相互关系？"></a>25.’display’、’position’和’float’的相互关系？</h2><blockquote>
<p>（1）首先我们判断display属性是否为none，如果为none，则position和float属性的值不影响元素最后的表现。</p>
</blockquote>
<blockquote>
<p>（2）然后判断position的值是否为absolute或者fixed，如果是，则float属性失效，并且display的值应该被设置为table或者block，具体转换需要看初始转换值。</p>
</blockquote>
<blockquote>
<p>（3）如果position的值不为absolute或者fixed，则判断float属性的值是否为none，如果不是，则display的值则按上面的规则转换。注意，如果position的值为relative并且float属性的值存在，则relative相对于浮动后的最终位置定位。</p>
</blockquote>
<blockquote>
<p>（4）如果float的值为none，则判断元素是否为根元素，如果是根元素则display属性按照上面的规则转换，如果不是，则保持指定的display属性值不变。</p>
</blockquote>
<blockquote>
<p>总的来说，可以把它看作是一个类似优先级的机制，”position:absolute”和”position:fixed”优先级最高，有它存在的时候，浮动不起作用，’display’的值也需要调整；其次，元素的’float’特性的值不是”none”的时候或者它是根元素的时候，调整’display’的值；最后，非根元素，并且非浮动元素，并且非绝对定位的元素，’display’特性值同设置值。</p>
</blockquote>
<p>这从另一个侧面说明了一个问题：浮动或绝对定位的元素，只能是块元素或表格。</p>
<h2 id="26-margin-重叠问题的理解。"><a href="#26-margin-重叠问题的理解。" class="headerlink" title="26.margin 重叠问题的理解。"></a>26.margin 重叠问题的理解。</h2><p>一般来说可以分为四种情形：</p>
<blockquote>
<p>第一种是相邻兄弟元素的marin-bottom和margin-top的值发生重叠。这种情况下我们可以通过设置其中一个元素为BFC来解决。</p>
</blockquote>
<blockquote>
<p>第二种是父元素的margin-top和子元素的margin-top发生重叠。它们发生重叠是因为它们是相邻的，所以我们可以通过这一点来解决这个问题。我们可以为父元素设置border-top、padding-top值来分隔它们，当然我们也可以将父元素设置为BFC来解决。</p>
</blockquote>
<blockquote>
<p>第三种是高度为auto的父元素的margin-bottom和子元素的margin-bottom发生重叠。它们发生重叠一个是因为它们相邻，一个是因为父元素的高度不固定。因此我们可以为父元素设置border-bottom、padding-bottom来分隔它们，也可以为父元素设置一个高度，max-height和min-height也能解决这个问题。当然将父元素设置为BFC是最简单的方法。</p>
</blockquote>
<blockquote>
<p>第四种情况，是没有内容的元素，自身的margin-top和margin-bottom发生的重叠。我们可以通过为其设置border、padding或者高度来解决这个问题。</p>
</blockquote>
<h2 id="27-对-BFC-规范（块级格式化上下文：blockformattingcontext）的理解？"><a href="#27-对-BFC-规范（块级格式化上下文：blockformattingcontext）的理解？" class="headerlink" title="27.对 BFC 规范（块级格式化上下文：blockformattingcontext）的理解？"></a>27.对 BFC 规范（块级格式化上下文：blockformattingcontext）的理解？</h2><blockquote>
<p>BFC指的是块级格式化上下文，一个元素形成了BFC之后，那么它内部元素产生的布局不会影响到外部元素，外部元素的布局也不会影响到BFC中的内部元素。一个BFC就像是一个隔离区域，和其他区域互不影响。</p>
</blockquote>
<p>创建BFC</p>
<blockquote>
<p>（1）根元素或包含根元素的元素<br>（2）浮动元素float＝left|right或inherit（≠none）<br>（3）绝对定位元素position＝absolute或fixed<br>（4）display＝inline-block|flex|inline-flex|table-cell或table-caption<br>（5）overflow＝hidden|auto或scroll(≠visible)</p>
</blockquote>
<h2 id="28-浮动带来的影响"><a href="#28-浮动带来的影响" class="headerlink" title="28.浮动带来的影响"></a>28.浮动带来的影响</h2><blockquote>
<p>浮动元素可以左右移动，直到遇到另一个浮动元素或者遇到它外边缘的包含框。浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素布局。此时文档流中的普通流就会表现得该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”。</p>
</blockquote>
<blockquote>
<p>清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。</p>
</blockquote>
<h2 id="29-如何清除浮动"><a href="#29-如何清除浮动" class="headerlink" title="29.如何清除浮动"></a>29.如何清除浮动</h2><blockquote>
<p>（1）使用clear属性清除浮动。</p>
</blockquote>
<blockquote>
<p>（2）使用BFC块级格式化上下文来清除浮动。</p>
</blockquote>
<blockquote>
<p>因为BFC元素不会影响外部元素的特点，所以BFC元素也可以用来清除浮动的影响，因为如果不清除，子元素浮动则父元素高度塌陷，必然会影响后面元素布局和定位，这显然有违BFC元素的子元素不会影响外部元素的设定。</p>
</blockquote>
<h2 id="30-使用-clear-属性清除浮动的原理？"><a href="#30-使用-clear-属性清除浮动的原理？" class="headerlink" title="30.使用 clear 属性清除浮动的原理？"></a>30.使用 clear 属性清除浮动的原理？</h2><blockquote>
<p>官方对clear属性的解释是：“元素盒子的边不能和前面的浮动元素相邻。”，</p>
</blockquote>
<blockquote>
<p><strong>所以clear:both并不是清除浮动，而是清除浮动元素对当前元素所造成的影响，浮动的盒子依旧是部分脱离文档流的</strong></p>
</blockquote>
<p>还需要注意的一点是clear属性指的是元素盒子的边不能和前面的浮动元素相邻，注意这里“前面的”3个字，也就是clear属性对“后面的”浮动元素是不闻不问的。考虑到float属性要么是left，要么是right，不可能同时存在，同时由于clear属性对“后面的”浮动元素不闻不问，因此，当clear:left有效的时候，clear:right必定无效，也就是此时clear:left等同于设置clear:both；同样地，clear:right如果有效也是等同于设置clear:both。由此可见，clear:left和clear:right这两个声明就没有任何使用的价值，至少在CSS世界中是如此，直接使用clear:both吧</p>
<p>一般使用伪元素的方式清除浮动</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-class">.clear</span><span class="selector-pseudo">::after</span>&#123;</span><br><span class="line">  <span class="attribute">content</span>:<span class="string">''</span>;</span><br><span class="line">  display:table;//也可以是'block'，或者是'list-item'</span><br><span class="line">  <span class="selector-tag">clear</span><span class="selector-pseudo">:both</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<p>clear属性只有块级元素才有效的，而::after等伪元素默认都是内联水平，这就是借助伪元素清除浮动影响时需要设置disp<br>lay属性值的原因。</p>
<p><a href="https://segmentfault.com/a/1190000021201257" target="_blank" rel="noopener"> clear-both深度解析 </a></p>
<h2 id="31-zoom-1-的清除浮动原理"><a href="#31-zoom-1-的清除浮动原理" class="headerlink" title="31.zoom:1 的清除浮动原理?"></a>31.zoom:1 的清除浮动原理?</h2><blockquote>
<p>清除浮动，触发hasLayout；</p>
</blockquote>
<blockquote>
<p>zoom属性是IE浏览器的专有属性，它可以设置或检索对象的缩放比例。解决ie下比较奇葩的bug。譬如外边距（margin）的重叠，浮动清除，触发ie的haslayout属性等。</p>
</blockquote>
<p>来龙去脉大概如下：<br>当设置了zoom的值之后，所设置的元素就会就会扩大或者缩小，高度宽度就会重新计算了，这里一旦改变zoom值时其实也会发生重新渲染，运用这个原理，也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。</p>
<p>zoom属性是IE浏览器的专有属性，火狐和老版本的webkit核心的浏览器都不支持这个属性。然而，zoom现在已经被逐步标准化，出现在CSS3.0规范草案中。</p>
<p>目前非ie由于不支持这个属性，它们又是通过什么属性来实现元素的缩放呢？可以通过css3里面的动画属性scale进行缩放。</p>
<h2 id="32-移动端的适配方案"><a href="#32-移动端的适配方案" class="headerlink" title="32.移动端的适配方案"></a>32.移动端的适配方案</h2><blockquote>
<p>（1）通过媒体查询的方式即CSS3的meida queries<br>（2）以天猫首页为代表的 flex 弹性布局<br>（3）以淘宝首页为代表的 rem+viewport缩放<br>（4）rem 方式</p>
</blockquote>
<h2 id="33-关于媒体查询"><a href="#33-关于媒体查询" class="headerlink" title="33.关于媒体查询"></a>33.关于媒体查询</h2><blockquote>
<p>当媒体查询为真时，相关的样式表或样式规则会按照正常的级联规被应用。当媒体查询返回假，标签上带有媒体查询的样式表仍将被下载（只不过不会被应用）。</p>
</blockquote>
<blockquote>
<p>包含了一个媒体类型和至少一个使用宽度、高度和颜色等媒体属性来限制样式表范围的表达式。CSS3加入的媒体查询使得无需修改内容便可以使样式应用于某些特定的设备范围。</p>
</blockquote>
<h2 id="34-CSS-优化、提高性能的方法有哪些？"><a href="#34-CSS-优化、提高性能的方法有哪些？" class="headerlink" title="34.CSS 优化、提高性能的方法有哪些？"></a>34.CSS 优化、提高性能的方法有哪些？</h2><p>加载性能：</p>
<blockquote>
<p>（1）css压缩：将写好的css进行打包压缩，可以减少很多的体积。<br>（2）css单一样式：当需要下边距和左边距的时候，很多时候选择:margin:top0bottom0;但margin-bottom:bottom;margin-left:left;执行的效率更高。<br>（3）减少使用@import,而建议使用link，因为后者在页面加载时一起加载，前者是等待页面加载完成之后再进行加载。</p>
</blockquote>
<p>选择器性能：</p>
<blockquote>
<p>（1）关键选择器（keyselector）。选择器的最后面的部分为关键选择器（即用来匹配目标元素的部分）。CSS选择符是从右到左进行匹配的。当使用后代选择器的时候，浏览器会遍历所有子元素来确定是否是指定的元素等等；<br>（2）如果规则拥有ID选择器作为其关键选择器，则不要为规则增加标签。过滤掉无关的规则（这样样式系统就不会浪费时间去匹配它们了）。<br>（3）避免使用通配规则，如*{}计算次数惊人！只对需要用到的元素进行选择。<br>（4）尽量少的去对标签进行选择，而是用class。<br>（5）尽量少的去使用后代选择器，降低选择器的权重值。后代选择器的开销是最高的，尽量将选择器的深度降到最低，最高不要超过三层，更多的使用类来关联每一个标签元素。<br>（6）了解哪些属性是可以通过继承而来的，然后避免对这些属性重复指定规则。</p>
</blockquote>
<p>渲染性能：</p>
<blockquote>
<p>（1）慎重使用高性能属性：浮动、定位。<br>（2）尽量减少页面重排、重绘。<br>（3）去除空规则：｛｝。空规则的产生原因一般来说是为了预留样式。去除这些空规则无疑能减少css文档体积。<br>（4）属性值为0时，不加单位。<br>（5）属性值为浮动小数0.**，可以省略小数点之前的0。<br>（6）标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后。<br>（7）不使用@import前缀，它会影响css的加载速度。<br>（8）选择器优化嵌套，尽量避免层级过深。<br>（9）css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用。<br>（10）正确使用display的属性，由于display的作用，某些样式组合会无效，徒增样式体积的同时也影响解析性能。<br>（11）不滥用web字体。对于中文网站来说WebFonts可能很陌生，国外却很流行。webfonts通常体积庞大，而且一些浏览器在下载webfonts时会阻塞页面渲染损伤性能。</p>
</blockquote>
<p>可维护性、健壮性：</p>
<blockquote>
<p>（1）将具有相同属性的样式抽离出来，整合并通过class在页面中进行使用，提高css的可维护性。<br>（2）样式与内容分离：将css代码定义到外部css中。</p>
</blockquote>
<h2 id="35-浏览器是怎样解析-CSS-选择器的？"><a href="#35-浏览器是怎样解析-CSS-选择器的？" class="headerlink" title="35.浏览器是怎样解析 CSS 选择器的？"></a>35.浏览器是怎样解析 CSS 选择器的？</h2><p>样式系统从关键选择器开始匹配，然后左移查找规则选择器的祖先元素。只要选择器的子树一直在工作，样式系统就会持续左移，直到和规则匹配，或者是因为不匹配而放弃该规则。</p>
<p>试想一下，如果采用从左至右的方式读取CSS规则，那么大多数规则读到最后（最右）才会发现是不匹配的，这样做会费时耗能，最后有很多都是无用的；而如果采取从右向左的方式，那么只要发现最右边选择器不匹配，就可以直接舍弃了，避免了许多无效匹配。</p>
<p><a href="https://blog.csdn.net/qq_21397815/article/details/72874932" target="_blank" rel="noopener"> 为什么css选择器是从右往左匹配的 </a></p>
<h2 id="36-在网页中应该使用奇数还是偶数的字体？为什么呢？"><a href="#36-在网页中应该使用奇数还是偶数的字体？为什么呢？" class="headerlink" title="36.在网页中应该使用奇数还是偶数的字体？为什么呢？"></a>36.在网页中应该使用奇数还是偶数的字体？为什么呢？</h2><blockquote>
<p>（1）偶数字号相对更容易和web设计的其他部分构成比例关系。比如：当我用了14px的正文字号，我可能会在一些地方用14×0.5=7px的margin，在另一些地方用14×1.5=21px的标题字号。<br>（2）浏览器缘故，低版本的浏览器ie6会把奇数字体强制转化为偶数，即13px渲染为14px。<br>（3）系统差别，早期的Windows里，中易宋体点阵只有12和14、15、16px，唯独缺少13px。</p>
</blockquote>
<h2 id="37-margin-和-padding-分别适合什么场景使用？"><a href="#37-margin-和-padding-分别适合什么场景使用？" class="headerlink" title="37.margin 和 padding 分别适合什么场景使用？"></a>37.margin 和 padding 分别适合什么场景使用？</h2><blockquote>
<p>margin是用来隔开元素与元素的间距；padding是用来隔开元素与内容的间隔。<br>margin用于布局分开元素使元素与元素互不相干。<br>padding用于元素与内容之间的间隔，让内容（文字）与（包裹）元素之间有一段距离。</p>
</blockquote>
<p>何时应当使用margin：</p>
<blockquote>
<p>•需要在border外侧添加空白时。<br>•空白处不需要背景（色）时。<br>•上下相连的两个盒子之间的空白，需要相互抵消时。如15px+20px的margin，将得到20px的空白。</p>
</blockquote>
<p>何时应当时用padding：</p>
<blockquote>
<p>•需要在border内测添加空白时。<br>•空白处需要背景（色）时。<br>•上下相连的两个盒子之间的空白，希望等于两者之和时。如15px+20px的padding，将得到35px的空白。</p>
</blockquote>
<h2 id="38-抽离样式模块怎么写，说出思路"><a href="#38-抽离样式模块怎么写，说出思路" class="headerlink" title="38.抽离样式模块怎么写，说出思路"></a>38.抽离样式模块怎么写，说出思路</h2><p>我的理解是把常用的css样式单独做成css文件……通用的和业务相关的分离出来，通用的做成样式模块儿共享，业务相关的，放进业务相关的库里面做成对应功能的模块儿。</p>
<h2 id="39-简单说一下-css3-的-all-属性。"><a href="#39-简单说一下-css3-的-all-属性。" class="headerlink" title="39.简单说一下 css3 的 all 属性。"></a>39.简单说一下 css3 的 all 属性。</h2><blockquote>
<p>all属性实际上是所有CSS属性的缩写，表示，所有的CSS属性都怎样怎样，但是，不包括unicode-bidi和direction这两个CSS属性。</p>
</blockquote>
<p>为什么会有这个CSS属性呢？</p>
<p>我们可能知道，有些CSS属性值基本上所有CSS属性都有，比方说继承inherit!</p>
<p>我们CSS reset输入框的时候，是不是有类似这样的代码（实际可能是具体值，作用类似）：<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span>, <span class="selector-tag">textarea</span> &#123;</span><br><span class="line">    <span class="attribute">color</span>: inherit;</span><br><span class="line">    <span class="attribute">font-size</span>: inherit;</span><br><span class="line">    <span class="attribute">font-family</span>: inherit;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><br>因为这类输入控件自身有内置的大小和字体，需要重置。</p>
<p>此时，大家就会发现，这些属性值都是inherit, 要是可以合并就好了！</p>
<p>哟哟哟，说到点子上了，CSS all属性就是用来合并的。<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span>, <span class="selector-tag">textarea</span> &#123; </span><br><span class="line">   <span class="attribute">all</span>: inherit; </span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><br>喔噢，三合一，顿时一阵春风拂面之感。但是，这里仅仅是展示作用，实际上是不会这么用的，因为，all:inherit会让背景色什么的，都继承父级，相信这不是你希望看到的。</p>
<h2 id="40-为什么不建议使用统配符初始化-css-样式。"><a href="#40-为什么不建议使用统配符初始化-css-样式。" class="headerlink" title="40.为什么不建议使用统配符初始化 css 样式。"></a>40.为什么不建议使用统配符初始化 css 样式。</h2><blockquote>
<p>采用*{pading:0;margin:0;}这样的写法好处是写起来很简单，但是是通配符，需要把所有的标签都遍历一遍，当网站较大时，样式比较多，这样写就大大的加强了网站运行的负载，会使网站加载的时候需要很长一段时间，因此一般大型的网站都有分层次的一套初始化样式。</p>
</blockquote>
<blockquote>
<p>出于性能的考虑，并不是所有标签都会有padding和margin，因此对常见的具有默认padding和margin的元素初始化即可，并不需使用通配符*来初始化。</p>
</blockquote>
<blockquote>
<p>上面就提到了，浏览器在解析css选择器时，通过从右到左的方式尽可能减少遍历的节点数量，努力提高性能。但是一个通配符选择器就可以让这些努力付之东流</p>
</blockquote>
<h2 id="41-absolute-的-containingblock（包含块）计算方式跟正常流有什么不同？"><a href="#41-absolute-的-containingblock（包含块）计算方式跟正常流有什么不同？" class="headerlink" title="41.absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？"></a>41.absolute 的 containingblock（包含块）计算方式跟正常流有什么不同？</h2><blockquote>
<p>（1）内联元素也可以作为“包含块”所在的元素；<br>（2）“包含块”所在的元素不是父块级元素，而是最近的position不为static的祖先元素或根元素；<br>（3）边界是paddingbox而不是contentbox。</p>
</blockquote>
<h2 id="42-对于-hasLayout-的理解"><a href="#42-对于-hasLayout-的理解" class="headerlink" title="42.对于 hasLayout 的理解"></a>42.对于 hasLayout 的理解</h2><p>》hasLayout是IE特有的一个属性。很多的IE下的cssbug都与其息息相关。在IE中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。当一个元素的hasLayout属性值为true时，它负责对自己和可能的子孙元素进行尺寸计算和定位。虽然这意味着这个元素需要花更多的代价来维护自身和里面的内容，而不是依赖于祖先元素来完成这些工作。</p>
<h2 id="43-元素竖向的百分比设定是相对于容器的高度吗？"><a href="#43-元素竖向的百分比设定是相对于容器的高度吗？" class="headerlink" title="43.元素竖向的百分比设定是相对于容器的高度吗？"></a>43.元素竖向的百分比设定是相对于容器的高度吗？</h2><blockquote>
<p>如果是height的话，是相对于包含块的<strong>高度</strong>。</p>
</blockquote>
<blockquote>
<p>如果是padding或者margin竖直方向的属性则是相对于包含块的<strong>宽度</strong>。</p>
</blockquote>
<h2 id="44-全屏滚动的原理是什么？用到了-CSS-的哪些属性？（待深入实践）"><a href="#44-全屏滚动的原理是什么？用到了-CSS-的哪些属性？（待深入实践）" class="headerlink" title="44.全屏滚动的原理是什么？用到了 CSS 的哪些属性？（待深入实践）"></a>44.全屏滚动的原理是什么？用到了 CSS 的哪些属性？（待深入实践）</h2><blockquote>
<p>原理：有点类似于轮播，整体的元素一直排列下去，假设有5个需要展示的全屏页面，那么高度是500%，只是展示100%，容器及容器内的页面取当前可视区高度，同时容器的父级元素overflow属性值设为hidden，通过更改容器可视区的位置来实现全屏滚动效果。主要是响应鼠标事件，页面通过CSS的动画效果，进行移动。<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">overflow</span>：<span class="selector-tag">hidden</span>；</span><br><span class="line"><span class="selector-tag">transition</span>：<span class="selector-tag">all</span> 1000<span class="selector-tag">ms</span> <span class="selector-tag">ease</span>；</span><br></pre></td></tr></table></figure></p>
</blockquote>
<h2 id="45-什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的-IE？"><a href="#45-什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的-IE？" class="headerlink" title="45.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？"></a>45.什么是响应式设计？响应式设计的基本原理是什么？如何兼容低版本的 IE？</h2><blockquote>
<p>响应式网站设计是一个网站能够兼容多个终端，而不是为每一个终端做一个特定的版本。基本原理是通过媒体查询检测不同的设备屏幕尺寸做处理。页面头部必须有meta声明的viewport。</p>
</blockquote>
<h2 id="47-如何修改-chrome-记住密码后自动填充表单的黄色背景？"><a href="#47-如何修改-chrome-记住密码后自动填充表单的黄色背景？" class="headerlink" title="47.如何修改 chrome 记住密码后自动填充表单的黄色背景？"></a>47.如何修改 chrome 记住密码后自动填充表单的黄色背景？</h2><p>chrome表单自动填充后，input文本框的背景会变成黄色的，通过审查元素可以看到这是由于chrome会默认给自动填充的input表单加上input:-webkit-autofill私有属性，然后对其赋予以下样式：<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">&#123;</span><br><span class="line"><span class="attribute">background-color</span>:<span class="built_in">rgb</span>(<span class="number">250</span>,<span class="number">255</span>,<span class="number">189</span>)<span class="meta">!important</span>;</span><br><span class="line"><span class="attribute">background-image</span>:none<span class="meta">!important</span>;</span><br><span class="line"><span class="attribute">color</span>:<span class="built_in">rgb</span>(<span class="number">0</span>,<span class="number">0</span>,<span class="number">0</span>)<span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure><br><strong>对chrome默认定义的background-color，background-image，color使用important是不能提高其优先级的，但是其他属性可使用。</strong><br>使用足够大的纯色内阴影来覆盖input输入框的黄色背景，处理如下</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">input</span><span class="selector-pseudo">:-webkit-autofill</span>,<span class="selector-tag">textarea</span><span class="selector-pseudo">:-webkit-autofill</span>,<span class="selector-tag">select</span><span class="selector-pseudo">:-webkit-autofill</span>&#123;</span><br><span class="line"><span class="attribute">-webkit-box-shadow</span>:<span class="number">000px</span>1000pxwhiteinset;</span><br><span class="line"><span class="attribute">border</span>:<span class="number">1px</span>solid<span class="number">#CCC</span><span class="meta">!important</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="48-怎么让-Chrome-支持小于-12px-的文字？"><a href="#48-怎么让-Chrome-支持小于-12px-的文字？" class="headerlink" title="48.怎么让 Chrome 支持小于 12px 的文字？"></a>48.怎么让 Chrome 支持小于 12px 的文字？</h2><p>在谷歌下css设置字体大小为12px及以下时，显示都是一样大小，都是默认12px。</p>
<blockquote>
<p>（1）可以使用Webkit的内核的-webkit-text-size-adjust的私有CSS属性来解决，只要加了-webkit-text-size-adjust:none;字体大小就不受限制了。但是chrome更新到27版本之后就不可以用了。所以高版本chrome谷歌浏览器已经不再支持-webkit-text-size-adjust样式，所以要使用时候慎用。</p>
</blockquote>
<blockquote>
<p>（2）还可以使用css3的transform缩放属性-webkit-transform:scale(0.5);注意-webkit-transform:scale(0.75);收缩的是整个元素的大小，这时候，如果是内联元素，必须要将内联元素转换成块元素，可以使用display：block/inline-block/…；</p>
</blockquote>
<blockquote>
<p>（3）使用图片：如果是内容固定不变情况下，使用将小于12px文字内容切出做图片，这样不影响兼容也不影响美观。</p>
</blockquote>
<h2 id="49-让页面里的字体变清晰，变细用-CSS-怎么做？"><a href="#49-让页面里的字体变清晰，变细用-CSS-怎么做？" class="headerlink" title="49.让页面里的字体变清晰，变细用 CSS 怎么做？"></a>49.让页面里的字体变清晰，变细用 CSS 怎么做？</h2><blockquote>
<p>webkit内核的私有属性：-webkit-font-smoothing，用于字体抗锯齿，使用后字体看起来会更清晰舒服。</p>
</blockquote>
<p>-webkit-font-smoothing它有三个属性值：<br>none：对低像素的文本比较好<br>subpixel-antialiased：默认值<br>antialiased：抗锯齿很好 </p>
<blockquote>
<p>在MacOS测试环境下面设置-webkit-font-smoothing:antialiased;但是这个属性仅仅是面向MacOS，其他操作系统设置后无效。</p>
</blockquote>
<h2 id="50-font-style-属性中-italic-和-oblique-的区别？"><a href="#50-font-style-属性中-italic-和-oblique-的区别？" class="headerlink" title="50.font-style 属性中 italic 和 oblique 的区别？"></a>50.font-style 属性中 italic 和 oblique 的区别？</h2><blockquote>
<p>italic和oblique这两个关键字都表示“斜体”的意思。</p>
</blockquote>
<blockquote>
<p>它们的区别在于，italic是使用当前字体的斜体字体，而oblique只是单纯地让文字倾斜。如果当前字体没有对应的斜体字体，则退而求其次，解析为oblique，也就是单纯形状倾斜。</p>
</blockquote>
<h2 id="51-设备像素、css-像素、设备独立像素、dpr、ppi-之间的区别？"><a href="#51-设备像素、css-像素、设备独立像素、dpr、ppi-之间的区别？" class="headerlink" title="51.设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？"></a>51.设备像素、css 像素、设备独立像素、dpr、ppi 之间的区别？</h2><blockquote>
<p>设备像素指的是物理像素，一般手机的分辨率指的就是设备像素，一个设备的设备像素是不可变的。</p>
</blockquote>
<blockquote>
<p>css像素和设备独立像素是等价的，不管在何种分辨率的设备上，css像素的大小应该是一致的，css像素是一个相对单位，它是相对于设备像素的，一个css像素的大小取决于页面缩放程度和dpr的大小。</p>
</blockquote>
<blockquote>
<p>dpr指的是设备像素和设备独立像素的比值，一般的pc屏幕，dpr=1。在iphone4时，苹果推出了retina屏幕，它的dpr为2。屏幕的缩放会改变dpr的值。</p>
</blockquote>
<blockquote>
<p>ppi指的是每英寸的物理像素的密度，ppi越大，屏幕的分辨率越大。</p>
</blockquote>
<h2 id="52-layoutviewport、visualviewport-和-idealviewport-的区别？"><a href="#52-layoutviewport、visualviewport-和-idealviewport-的区别？" class="headerlink" title="52.layoutviewport、visualviewport 和 idealviewport 的区别？"></a>52.layoutviewport、visualviewport 和 idealviewport 的区别？</h2><p>移动端一共需要理解三个viewport的概念的理解。</p>
<blockquote>
<p>第一个视口是布局视口，在移动端显示网页时，由于移动端的屏幕尺寸比较小，如果网页使用移动端的屏幕尺寸进行布局的话，那么整个页面的布局都会显示错乱。所以移动端浏览器提供了一个layoutviewport布局视口的概念，使用这个视口来对页面进行布局展示，一般layoutviewport的大小为980px，因此页面布局不会有太大的变化，我们可以通过拖动和缩放来查看到这个页面。</p>
</blockquote>
<blockquote>
<p>第二个视口指的是视觉视口，visualviewport指的是移动设备上我们可见的区域的视口大小，一般为屏幕的分辨率的大小。visualviewport和layoutviewport的关系，就像是我们通过窗户看外面的风景，视觉视口就是窗户，而外面的风景就是布局视口中的网页内容。</p>
</blockquote>
<blockquote>
<p>第三个视口是理想视口，由于layoutviewport一般比visualviewport要大，所以想要看到整个页面必须通过拖动和缩放才能实现。所以又提出了idealviewport的概念，idealviewport下用户不用缩放和滚动条就能够查看到整个页面，并且页面在不同分辨率下显示的内容大小相同。idealviewport其实就是通过修改layoutviewport的大小，让它等于设备的宽度，这个宽度可以理解为是设备独立像素，因此根据idealviewport设计的页面，在不同分辨率的屏幕下，显示应该相同。</p>
</blockquote>
<h2 id="53-position-fixed-在-android-下无效怎么处理？"><a href="#53-position-fixed-在-android-下无效怎么处理？" class="headerlink" title="53.position:fixed;在 android 下无效怎么处理？"></a>53.position:fixed;在 android 下无效怎么处理？</h2><blockquote>
<p>因为移动端浏览器默认的viewport叫做layoutviewport。在移动端显示时，因为layoutviewport的宽度大于移动端屏的宽度，所以页面会出现滚动条左右移动，fixed的元素是相对layoutviewport来固定位置的，而不是移动端屏幕来固定位置的，所以会出现感觉fixed无效的情况。</p>
</blockquote>
<blockquote>
<p>如果想实现fixed相对于屏幕的固定效果，我们需要改变的是viewport的大小为idealviewport，可以如下设置：</p>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="tag">&lt;<span class="name">meta</span> <span class="attr">name</span>=<span class="string">"viewport"</span><span class="attr">content</span>=<span class="string">"width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no"</span>/&gt;</span></span><br></pre></td></tr></table></figure>
<h2 id="54-如果需要手动写动画，你认为最小时间间隔是多久，为什么？"><a href="#54-如果需要手动写动画，你认为最小时间间隔是多久，为什么？" class="headerlink" title="54.如果需要手动写动画，你认为最小时间间隔是多久，为什么？"></a>54.如果需要手动写动画，你认为最小时间间隔是多久，为什么？</h2><blockquote>
<p>多数显示器默认频率是60Hz，即1秒刷新60次，所以理论上最小间隔为1/60*1000ms＝16.7ms</p>
</blockquote>
<h2 id="55-如何让去除-inline-block-元素间间距？"><a href="#55-如何让去除-inline-block-元素间间距？" class="headerlink" title="55.如何让去除 inline-block 元素间间距？."></a>55.如何让去除 inline-block 元素间间距？.</h2><blockquote>
<p>移除空格、使用margin负值、使用font-size:0、letter-spacing、word-spacing</p>
</blockquote>
<h2 id="56-overflow-scroll-时不能平滑滚动的问题怎么处理？"><a href="#56-overflow-scroll-时不能平滑滚动的问题怎么处理？" class="headerlink" title="56.overflow:scroll 时不能平滑滚动的问题怎么处理？"></a>56.overflow:scroll 时不能平滑滚动的问题怎么处理？</h2><p>启用了硬件加速特性:<br><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 57.有一个高度自适应的 div，里面有两个 div，一个高度 100px，希望另一个填满剩下的高度。</span><br><span class="line">&gt;（1）外层div使用position：relative；高度要求自适应的div使用position:absolute;top:100px;bottom:0;</span><br><span class="line">left:0;right:0;</span><br><span class="line"></span><br><span class="line">&gt;（2）使用flex布局，设置主轴为竖轴，第二个div的flex-grow为1。</span><br><span class="line"></span><br><span class="line">## 58.png、jpg、gif 这些图片格式解释一下，分别什么时候用。有没有了解过 webp</span><br><span class="line">&gt;（1）第一种是BMP格式，它是无损压缩的，支持索引色和直接色的点阵图。由于它基本上没有进行压缩，因此它的文件体积一般比较大。</span><br><span class="line"></span><br><span class="line">&gt;（2）第二种是GIF格式，它是无损压缩的使用索引色的点阵图。由于使用了LZW压缩方法，因此文件的体积很小。并且GIF还支持动画和透明度。但因为它使用的是索引色，所以它适用于一些对颜色要求不高且需要文件体积小的场景。</span><br><span class="line"></span><br><span class="line">&gt;（3）第三种是JPEG格式，它是有损压缩的使用直接色的点阵图。由于使用了直接色，色彩较为丰富，一般适用于来存储照片。但由于使用的是直接色，可能文件的体积相对于GIF格式来说更大。</span><br><span class="line"></span><br><span class="line">&gt;（4）第四种是PNG-8格式，它是无损压缩的使用索引色的点阵图。它是GIF的一种很好的替代格式，它也支持透明度的调整，并且文件的体积相对于GIF格式更小。一般来说如果不是需要动画的情况，我们都可以使用PNG-8格式代替GIF格式。</span><br><span class="line"></span><br><span class="line">&gt;（5）第五种是PNG-24格式，它是无损压缩的使用直接色的点阵图。PNG-24的优点是它使用了压缩算法，所以它的体积比BMP格式的文件要小得多，但是相对于其他的几种格式，还是要大一些。</span><br><span class="line"></span><br><span class="line">&gt;（6）第六种格式是svg格式，它是矢量图，它记录的图片的绘制方式，因此对矢量图进行放大和缩小不会产生锯齿和失真。它一般适合于用来制作一些网站logo或者图标之类的图片。</span><br><span class="line"></span><br><span class="line">&gt;（7）第七种格式是webp格式，它是支持有损和无损两种压缩方式的使用直接色的点阵图。使用webp格式的最大的优点是，在相同质量的文件下，它拥有更小的文件体积。因此它非常适合于网络图片的传输，因为图片体积的减少，意味着请求时间的减小，这样会提高用户的体验。这是谷歌开发的一种新的图片格式，目前在兼容性上还不是太好。</span><br><span class="line"></span><br><span class="line">## 59.如何判断是否支持 webp 格式图片</span><br><span class="line">&gt;（1）宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格式的图片。</span><br><span class="line"></span><br><span class="line">&gt;（2）canvas判断方法。我们可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断返回值中是否含有image&#x2F;webp字段，如果包含则说明支持WebP，反之则不支持。</span><br><span class="line"></span><br><span class="line">## 60.什么是 Cookie 隔离？（或者说：请求资源的时候不要让它带 cookie 怎么做）</span><br><span class="line">&gt;网站向服务器请求的时候，会自动带上cookie这样增加表头信息量，使请求变慢。</span><br><span class="line"></span><br><span class="line">&gt;如果静态文件都放在主域名下，那静态文件请求的时候都带有的cookie的数据提交给server的，非常浪费流量，所以不如隔离开，静态资源放CDN。</span><br><span class="line"></span><br><span class="line">&gt;因为cookie有域的限制，因此不能跨域提交请求，故使用非主要域名的时候，请求头中就不会带有cookie数据，这样可以降低请求头的大小，降低请求时间，从而达到降低整体请求延时的目的。</span><br><span class="line"></span><br><span class="line">&gt;同时这种方式不会将cookie传入WebServer，也减少了WebServer对cookie的处理分析环节，提高了webserver的http请求的解析速度。</span><br><span class="line"></span><br><span class="line">## 61.style 标签写在 body 后与 body 前有什么区别？</span><br><span class="line">&gt;页面加载自上而下当然是先加载样式。写在body标签后由于浏览器以逐行方式对HTML文档进行解析，当解析到写在尾部的样式表（外联或写在style标签）会导致浏览器停止之前的渲染，等待加载且解析样式表完成之后重新渲染，在windows的IE下可能会出现FOUC现象（即样式失效导致的页面闪烁问题）</span><br><span class="line"></span><br><span class="line">## 62.什么是 CSS 预处理器？</span><br><span class="line">&gt;CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后再编译成正常的CSS文件。</span><br><span class="line"></span><br><span class="line">&gt;预处理器例如：LESS、Sass、Stylus，用来预编译Sass或lesscsssprite，增强了css代码的复用性，还有层级、mixin、变量、循环、函数等，具有很方便的UI组件模块化开发能力，极大的提高工作效率。</span><br><span class="line"></span><br><span class="line">## 63.阐述一下 CSSSprites</span><br><span class="line">&gt;将一个页面涉及到的所有图片都包含到一张大图中去，然后利用CSS的background-image，background-repeat，background-position的组合进行背景定位。利用CSSSprites能很好地减少网页的http请求，从而很好的提高页面的性能；CSSSprites能减少图片的字节。</span><br><span class="line"></span><br><span class="line">优点：</span><br><span class="line"></span><br><span class="line">&gt;减少HTTP请求数，极大地提高页面加载速度</span><br><span class="line">增加图片信息重复度，提高压缩比，减少图片大小</span><br><span class="line">更换风格方便，只需在一张或几张图片上修改颜色或样式即可实现</span><br><span class="line"></span><br><span class="line">缺点：</span><br><span class="line"></span><br><span class="line">&gt;图片合并麻烦</span><br><span class="line">维护麻烦，修改一个图片可能需要重新布局整个图片，样式</span><br><span class="line"></span><br><span class="line">## 64.使用 rem 布局的优缺点？</span><br><span class="line">优点：</span><br><span class="line">&gt;在屏幕分辨率千差万别的时代，只要将rem与屏幕分辨率关联起来就可以实现页面的整体缩放，使得在设备上的展现都统一起来了。而且现在浏览器基本都已经支持rem了，兼容性也非常的好。</span><br><span class="line"></span><br><span class="line">缺点：</span><br><span class="line">&gt;（1）在奇葩的dpr设备上表现效果不太好，比如一些华为的高端机型用rem布局会出现错乱。</span><br><span class="line">（2）使用iframe引用也会出现问题。</span><br><span class="line">（3）rem在多屏幕尺寸适配上与当前两大平台的设计哲学不一致。即大屏的出现到底是为了看得又大又清楚，还是为了看的更多的问题。</span><br><span class="line"></span><br><span class="line">## 65. 为什么设计稿是750px</span><br><span class="line">我们通过动态的获取设备独立像素，然后除以设计稿的宽度，然后赋给根字体的fontsize，以致来动态改变跟字体大小，做到自适应。但至于为什么要乘100，首先375 &#x2F; 750是0.5，浏览器默认最小字体为12px，所以我们需要放大一些，而100又很好算，我们只需要将设计稿量出来的长度（px），小数点向左移2位，单位变成rem就好了。</span><br><span class="line"></span><br><span class="line">例子：</span><br><span class="line">比如给你个&#96;&#96;&#96;40*40&#96;&#96;&#96;的图片设计稿，dpr为2的屏幕上我们需要设置20*20的px值，对于不同dpr的屏幕，就可以用上述的方法进行适配，适配完之后&#96;&#96;&#96;40 * 0.01 * 50 &#x3D; 20px&#96;&#96;&#96;，可见结果是一样的</span><br><span class="line">&#96;&#96;&#96;js</span><br><span class="line">(function () &#123;</span><br><span class="line">　　　function changeRootFont() &#123;</span><br><span class="line">　　　   var designWidth &#x3D; 750, rem2px &#x3D; 100;</span><br><span class="line">　　　   document.documentElement.style.fontsize &#x3D; </span><br><span class="line">　　　  ((window.innerWidth &#x2F; designWidth) * rem2px) + &#39;px&#39;;</span><br><span class="line">　　　  &#x2F;&#x2F;iphone6: (375 &#x2F; 750) * 100 + &#39;px&#39;;</span><br><span class="line">　　　&#125;</span><br><span class="line">　　　changeRootFont();</span><br><span class="line">　　　window.addEventListener(&#39;resize&#39;, changeRootFont,false);</span><br><span class="line">&#125;)();</span><br></pre></td></tr></table></figure></p>
<h2 id="66-画一条-0-5px-的线"><a href="#66-画一条-0-5px-的线" class="headerlink" title="66.画一条 0.5px 的线"></a>66.画一条 0.5px 的线</h2><p>在css里最低的单位就是1px了，那么如果给真机一个1px的边框，会出现2像素的宽，如何解决这个问题呢？<br><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">tranform</span><span class="selector-pseudo">:scal(0.5)</span>;</span><br></pre></td></tr></table></figure></p>
<h2 id="67-transition-和-animation-的区别"><a href="#67-transition-和-animation-的区别" class="headerlink" title="67.transition 和 animation 的区别"></a>67.transition 和 animation 的区别</h2><blockquote>
<p>transition关注的是CSSproperty的变化，property值和时间的关系是一个三次贝塞尔曲线。</p>
</blockquote>
<blockquote>
<p>animation作用于元素本身而不是样式属性，可以使用关键帧的概念，应该说可以实现更自由的动画效果。</p>
</blockquote>
<h2 id="68-什么是首选最小宽度？"><a href="#68-什么是首选最小宽度？" class="headerlink" title="68.什么是首选最小宽度？"></a>68.什么是首选最小宽度？</h2><blockquote>
<p>“首选最小宽度”，指的是元素最适合的最小宽度。</p>
</blockquote>
<blockquote>
<p>东亚文字（如中文）最小宽度为每个汉字的宽度。</p>
</blockquote>
<blockquote>
<p>西方文字最小宽度由特定的连续的英文字符单元决定。并不是所有的英文字符都会组成连续单元，一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等。</p>
</blockquote>
<blockquote>
<p>如果想让英文字符和中文一样，每一个字符都用最小宽度单元，可以试试使用CSS中的word-break:break-all。</p>
</blockquote>
<h2 id="69-为什么-height-100-会无效？"><a href="#69-为什么-height-100-会无效？" class="headerlink" title="69.为什么 height:100%会无效？"></a>69.为什么 height:100%会无效？</h2><blockquote>
<p>对于普通文档流中的元素，百分比高度值要想起作用，其父级必须有一个可以生效的高度值。</p>
</blockquote>
<blockquote>
<p>原因是如果包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto，因为解释成了auto，所以无法参与计算。</p>
</blockquote>
<blockquote>
<p>使用绝对定位的元素会有计算值，即使祖先元素的height计算为auto也是如此。</p>
</blockquote>
<h2 id="70-min-width-max-width-和-min-height-max-height-属性间的覆盖规则？"><a href="#70-min-width-max-width-和-min-height-max-height-属性间的覆盖规则？" class="headerlink" title="70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则？"></a>70.min-width/max-width 和 min-height/max-height 属性间的覆盖规则？</h2><blockquote>
<p>（1）max-width会覆盖width，即使width是行类样式或者设置了!important。</p>
</blockquote>
<blockquote>
<p>（2）min-width会覆盖max-width，此规则发生在min-width和max-width冲突的时候。</p>
</blockquote>
<h2 id="71-内联盒模型基本概念"><a href="#71-内联盒模型基本概念" class="headerlink" title="71.内联盒模型基本概念"></a>71.内联盒模型基本概念</h2><blockquote>
<p>（1）内容区域（contentarea）。内容区域指一种围绕文字看不见的盒子，其大小仅受字符本身特性控制，本质上是一个字符盒子（characterbox）；但是有些元素，如图片这样的替换元素，其内容显然不是文字，不存在字符盒子之类的，因此，对于这些元素，内容区域可以看成元素自身。</p>
</blockquote>
<blockquote>
<p>（2）内联盒子（inlinebox）。“内联盒子”不会让内容成块显示，而是排成一行，这里的“内联盒子”实际指的就是元素的“外在盒子”，用来决定元素是内联还是块级。该盒子又可以细分为“内联盒子”和“匿名内联盒子”两类。</p>
</blockquote>
<blockquote>
<p>（3）行框盒子（linebox），每一行就是一个“行框盒子”（实线框标注），每个“行框盒子”又是由一个一个“内联盒子”组成的。</p>
</blockquote>
<blockquote>
<p>（4）包含块（containingbox），由一行一行的“行框盒子”组成。</p>
</blockquote>
<h2 id="72-什么是幽灵空白节点？"><a href="#72-什么是幽灵空白节点？" class="headerlink" title="72.什么是幽灵空白节点？"></a>72.什么是幽灵空白节点？</h2><blockquote>
<p>“幽灵空白节点”是内联盒模型中非常重要的一个概念，具体指的是：在HTML5文档声明中，内联元素的所有解析和渲染表现就如同每个行框盒子的前面有一个“空白节点”一样。这个“空白节点”永远透明，不占据任何宽度，看不见也无法通过脚本获取，就好像幽灵一样，但又确确实实地存在，表现如同文本节点一样，因此，我称之为“幽灵空白节点”。</p>
</blockquote>
<h2 id="73-什么是替换元素？"><a href="#73-什么是替换元素？" class="headerlink" title="73.什么是替换元素？"></a>73.什么是替换元素？</h2><blockquote>
<p>通过修改某个属性值呈现的内容就可以被替换的元素就称为“替换元素”。因此，<code>&lt;img&gt;、&lt;object&gt;、&lt;video&gt;、&lt;iframe&gt;</code>或者表单元素<code>&lt;textarea&gt;</code>和<code>&lt;input&gt;</code>和<code>&lt;select&gt;</code>都是典型的替换元素。</p>
</blockquote>
<p>替换元素除了内容可替换这一特性以外，还有以下一些特性。</p>
<blockquote>
<p>（1）内容的外观不受页面上的CSS的影响。用专业的话讲就是在样式表现在CSS作用域之外。如何更改替换元素本身的外观需要类似appearance属性，或者浏览器自身暴露的一些样式接口，</p>
</blockquote>
<blockquote>
<p>（2）有自己的尺寸。在Web中，很多替换元素在没有明确尺寸设定的情况下，其默认的尺寸（不包括边框）是300像素×150像素，如<code>&lt;video&gt;</code>、<code>&lt;iframe&gt;</code>或者<code>&lt;canvas&gt;</code>等，也有少部分替换元素为0像素，如<code>&lt;img&gt;</code>图片，而表单元素的替换元素的尺寸则和浏览器有关，没有明显的规律。</p>
</blockquote>
<blockquote>
<p>（3）在很多CSS属性上有自己的一套表现规则。比较具有代表性的就是vertical-align属性，对于替换元素和非替换元素，vertical-align属性值的解释是不一样的。比方说vertical-align的默认值的baseline，很简单的属性值，基线之意，被定义为字符x的下边缘，而替换元素的基线却被硬生生定义成了元素的下边缘。</p>
</blockquote>
<blockquote>
<p>（4）所有的替换元素都是内联水平元素，也就是替换元素和替换元素、替换元素和文字都是可以在一行显示的。但是，替换元素默认的display值却是不一样的，有的是inline，有的是inline-block。</p>
</blockquote>
<h2 id="74-替换元素的计算规则？"><a href="#74-替换元素的计算规则？" class="headerlink" title="74.替换元素的计算规则？"></a>74.替换元素的计算规则？</h2><p>替换元素的尺寸从内而外分为3类：固有尺寸、HTML尺寸和CSS尺寸。</p>
<blockquote>
<p>（1）固有尺寸指的是替换内容原本的尺寸。例如，图片、视频作为一个独立文件存在的时候，都是有着自己的宽度和高度的。</p>
</blockquote>
<blockquote>
<p>（2）HTML尺寸只能通过HTML原生属性改变，这些HTML原生属性包括<code>&lt;img&gt;</code>的width和height属性、<code>&lt;input&gt;</code>的size属性、<code>&lt;textarea&gt;</code>的cols和rows属性等。</p>
</blockquote>
<blockquote>
<p>（3）CSS尺寸特指可以通过CSS的width和height或者max-width/min-width和max-height/min-height设置的尺寸，对应盒尺寸中的contentbox。</p>
</blockquote>
<p>这3层结构的计算规则具体如下</p>
<blockquote>
<p>（1）如果没有CSS尺寸和HTML尺寸，则使用固有尺寸作为最终的宽高。</p>
</blockquote>
<blockquote>
<p>（2）如果没有CSS尺寸，则使用HTML尺寸作为最终的宽高。</p>
</blockquote>
<blockquote>
<p>（3）如果有CSS尺寸，则最终尺寸由CSS属性决定。</p>
</blockquote>
<blockquote>
<p>（4）如果“固有尺寸”含有固有的宽高比例，同时仅设置了宽度或仅设置了高度，则元素依然按照固有的宽高比例显示。</p>
</blockquote>
<blockquote>
<p>（5）如果上面的条件都不符合，则最终宽度表现为300像素，高度为150像素。</p>
</blockquote>
<blockquote>
<p>（6）内联替换元素和块级替换元素使用上面同一套尺寸计算规则。</p>
</blockquote>
<h2 id="75-content-与替换元素的关系"><a href="#75-content-与替换元素的关系" class="headerlink" title="75.content 与替换元素的关系"></a>75.content 与替换元素的关系</h2><p>content属性生成的对象称为“匿名替换元素”。</p>
<blockquote>
<p>（1）我们使用content生成的文本是无法选中、无法复制的，好像设置了userselect:none声明一般，但是普通元素的文本却可以被轻松选中。同时，content生成的文本无法被屏幕阅读设备读取，也无法被搜索引擎抓取，因此，千万不要自以为是地把重要的文本信息使用content属性生成，因为这对可访问性和SEO都很不友好。</p>
</blockquote>
<blockquote>
<p>（2）content生成的内容不能左右:empty伪类。</p>
</blockquote>
<blockquote>
<p>（3）content动态生成值无法获取。</p>
</blockquote>
<h2 id="76-margin-auto-的填充规则？"><a href="#76-margin-auto-的填充规则？" class="headerlink" title="76.margin:auto 的填充规则？"></a>76.margin:auto 的填充规则？</h2><p>margin的’auto’可不是摆设，是具有强烈的计算意味的关键字，用来计算元素对应方向应该获得的剩余间距大小。但是触发margin:auto计算有一个前提条件，就是width或height为auto时，元素是具有对应方向的自动填充特性的。</p>
<p>（1）如果一侧定值，一侧auto，则auto为剩余空间大小。<br>（2）如果两侧均是auto，则平分剩余空间。</p>
<h2 id="77-margin-无效的情形"><a href="#77-margin-无效的情形" class="headerlink" title="77.margin 无效的情形"></a>77.margin 无效的情形</h2><blockquote>
<p>（1）display计算值inline的非替换元素的垂直margin是无效的。对于内联替换元素，垂直margin有效，并且没有margin合并的问题。</p>
</blockquote>
<p>（2）表格中的<tr>和<td>元素或者设置display计算值是table-cell或table-row的元素的margin都是无效的。</p>
<p>（3）绝对定位元素非定位方位的margin值“无效”。</p>
<p>（4）定高容器的子元素的margin-bottom或者宽度定死的子元素的margin-right的定位“失效”。</p>
<h2 id="78-border-的特殊性？"><a href="#78-border-的特殊性？" class="headerlink" title="78.border 的特殊性？"></a>78.border 的特殊性？</h2><blockquote>
<p>（1）border-width不支持百分比。</p>
</blockquote>
<blockquote>
<p>（2）border-style的默认值是none，有一部分人可能会误以为是solid。这也是单纯设置border-width或border-color没有边框显示的原因。</p>
</blockquote>
<blockquote>
<p>（3）border-style:double的表现规则：双线宽度永远相等，中间间隔±1。</p>
</blockquote>
<blockquote>
<p>（4）border-color默认颜色就是color色值。</p>
</blockquote>
<blockquote>
<p>（5）默认background背景图片是相对于paddingbox定位的。</p>
</blockquote>
<h2 id="79-什么是基线和-x-height？"><a href="#79-什么是基线和-x-height？" class="headerlink" title="79.什么是基线和 x-height？"></a>79.什么是基线和 x-height？</h2><blockquote>
<p>字母x的下边缘（线）就是我们的基线。</p>
</blockquote>
<blockquote>
<p>x-height指的就是小写字母x的高度，术语描述就是基线和等分线（meanline）（也称作中线，midline）之间的距离。在C<br>SS世界中，middle指的是基线往上1/2x-height高度。我们可以近似理解为字母x交叉点那个位置。</p>
</blockquote>
<blockquote>
<p>ex是CSS中的一个相对单位，指的是小写字母x的高度，没错，就是指x-height。ex的价值就在其副业上不受字体和字号影<br>响的内联元素的垂直居中对齐效果。内联元素默认是基线对齐的，而基线就是x的底部，而1ex就是一个x的高度。</p>
</blockquote>
<h2 id="80-line-height-的特殊性？"><a href="#80-line-height-的特殊性？" class="headerlink" title="80.line-height 的特殊性？"></a>80.line-height 的特殊性？</h2><blockquote>
<p>（1）对于非替换元素的纯内联元素，其可视高度完全由line-height决定。对于文本这样的纯内联元素，line-height就是高度计算的基石，用专业说法就是指定了用来计算行框盒子高度的基础高度。</p>
</blockquote>
<blockquote>
<p>（2）内联元素的高度由固定高度和不固定高度组成，这个不固定的部分就是这里的“行距”。换句话说，line-height之所以起作用，就是通过改变“行距”来实现的。在CSS中，“行距”分散在当前文字的上方和下方，也就是即使是第一行文字，其上方也是有“行距”的，只不过这个“行距”的高度仅仅是完整“行距”高度的一半，因此，也被称为“半行距”。</p>
</blockquote>
<blockquote>
<p>（3）行距=line-height-font-size。</p>
</blockquote>
<blockquote>
<p>（4）border以及line-height等传统CSS属性并没有小数像素的概念。如果标注的是文字上边距，则向下取整；如果是文字下边距，则向上取整。</p>
</blockquote>
<blockquote>
<p>（5）对于纯文本元素，line-height直接决定了最终的高度。但是，如果同时有替换元素，则line-height只能决定最小高度。</p>
</blockquote>
<blockquote>
<p>（6）对于块级元素，line-height对其本身是没有任何作用的，我们平时改变line-height，块级元素的高度跟着变化实际上是通过改变块级元素里面内联级别元素占据的高度实现的。</p>
</blockquote>
<blockquote>
<p>（7）line-height的默认值是normal，还支持数值、百分比值以及长度值。为数值类型时，其最终的计算值是和当前font-size相乘后的值。为百分比值时，其最终的计算值是和当前font-size相乘后的值。为长度值时原意不变。</p>
</blockquote>
<blockquote>
<p>（8）如果使用数值作为line-height的属性值，那么所有的子元素继承的都是这个值；但是，如果使用百分比值或者长度值作为属性值，那么所有的子元素继承的是最终的计算值。</p>
</blockquote>
<blockquote>
<p>（9）无论内联元素line-height如何设置，最终父级元素的高度都是由数值大的那个line-height决定的。</p>
</blockquote>
<blockquote>
<p>（10）只要有“内联盒子”在，就一定会有“行框盒子”，就是每一行内联元素外面包裹的一层看不见的盒子。然后，重点来了，在每个“行框盒子”前面有一个宽度为0的具有该元素的字体和行高属性的看不见的“幽灵空白节点”。</p>
</blockquote>
<h2 id="81-vertical-align-的特殊性？"><a href="#81-vertical-align-的特殊性？" class="headerlink" title="81.vertical-align 的特殊性？"></a>81.vertical-align 的特殊性？</h2><blockquote>
<p>（1）vertical-align的默认值是baseline，即基线对齐，而基线的定义是字母x的下边缘。因此，内联元素默认都是沿着字母x的下边缘对齐的。对于图片等替换元素，往往使用元素本身的下边缘作为基线。：一个inline-block元素，如果里面没有内联元素，或者overflow不是visible，则该元素的基线就是其margin底边缘；否则其基线就是元素里面最后一行内联元素的基线。</p>
</blockquote>
<blockquote>
<p>（2）vertical-align:top就是垂直上边缘对齐，如果是内联元素，则和这一行位置最高的内联元素的顶部对齐；如果display计算值是table-cell的元素，我们不妨脑补成<td>元素，则和<tr>元素上边缘对齐。</p>
</blockquote>
<blockquote>
<p>（3）vertical-align:middle是中间对齐，对于内联元素，元素的垂直中心点和行框盒子基线往上1/2x-height处对齐。对于table-cell元素，单元格填充盒子相对于外面的表格行居中对齐。</p>
</blockquote>
<blockquote>
<p>（4）vertical-align支持数值属性，根据数值的不同，相对于基线往上或往下偏移，如果是负值，往下偏移，如果是正值，往上偏移。</p>
</blockquote>
<blockquote>
<p>（5）vertical-align属性的百分比值则是相对于line-height的计算值计算的。</p>
</blockquote>
<blockquote>
<p>（6）vertical-align起作用是有前提条件的，这个前提条件就是：只能应用于内联元素以及display值为table-cell的元素。</p>
</blockquote>
<blockquote>
<p>（7）table-cell元素设置vertical-align垂直对齐的是子元素，但是其作用的并不是子元素，而是table-cell元素自身。</p>
</blockquote>
<h2 id="82-overflow-的特殊性？"><a href="#82-overflow-的特殊性？" class="headerlink" title="82.overflow 的特殊性？"></a>82.overflow 的特殊性？</h2><blockquote>
<p>（1）一个设置了overflow:hidden声明的元素，假设同时存在border属性和padding属性，则当子元素内容超出容器宽度高度限制的时候，剪裁的边界是borderbox的内边缘，而非paddingbox的内边缘。</p>
</blockquote>
<blockquote>
<p>（2）HTML中有两个标签是默认可以产生滚动条的，一个是根元素<html>，另一个是文本域<textarea>。</p>
</blockquote>
<blockquote>
<p>（3）滚动条会占用容器的可用宽度或高度。</p>
</blockquote>
<blockquote>
<p>（4）元素设置了overflow:hidden声明，里面内容高度溢出的时候，滚动依然存在，仅仅滚动条不存在！</p>
</blockquote>
<h2 id="83-无依赖绝对定位是什么？"><a href="#83-无依赖绝对定位是什么？" class="headerlink" title="83.无依赖绝对定位是什么？"></a>83.无依赖绝对定位是什么？</h2><blockquote>
<p>没有设置left/top/right/bottom属性值的绝对定位称为“无依赖绝对定位”。</p>
</blockquote>
<blockquote>
<p>无依赖绝对定位其定位的位置和没有设置position:absolute时候的位置相关。</p>
</blockquote>
<h2 id="84-absolute-与-overflow-的关系？"><a href="#84-absolute-与-overflow-的关系？" class="headerlink" title="84.absolute 与 overflow 的关系？"></a>84.absolute 与 overflow 的关系？</h2><blockquote>
<p>（1）如果overflow不是定位元素，同时绝对定位元素和overflow容器之间也没有定位元素，则overflow无法对absolute元素进行剪裁。</p>
</blockquote>
<blockquote>
<p>（2）如果overflow的属性值不是hidden而是auto或者scroll，即使绝对定位元素高宽比overflow元素高宽还要大，也都不会出现滚动条。</p>
</blockquote>
<blockquote>
<p>（3）overflow元素自身transform的时候，Chrome和Opera浏览器下的overflow剪裁是无效的。</p>
</blockquote>
<h2 id="85-clip-裁剪是什么？"><a href="#85-clip-裁剪是什么？" class="headerlink" title="85.clip 裁剪是什么？"></a>85.clip 裁剪是什么？</h2><blockquote>
<p>所谓“可访问性隐藏”，指的是虽然内容肉眼看不见，但是其他辅助设备却能够进行识别和访问的隐藏。</p>
</blockquote>
<blockquote>
<p>clip剪裁被我称为“最佳可访问性隐藏”的另外一个原因就是，它具有更强的普遍适应性，任何元素、任何场景都可以无障碍使用。</p>
</blockquote>
<h2 id="86-relative-的特殊性？"><a href="#86-relative-的特殊性？" class="headerlink" title="86.relative 的特殊性？"></a>86.relative 的特殊性？</h2><blockquote>
<p>（1）<strong>相对定位元素的left/top/right/bottom的百分比值是相对于包含块计算的</strong>，而不是自身。注意，虽然定位位移是相对自身，但是百分比值的计算值不是。</p>
</blockquote>
<blockquote>
<p>（2）top和bottom这两个垂直方向的百分比值计算跟height的百分比值是一样的，都是相对高度计算的。同时，如果包含块的高度是auto，那么计算值是0，偏移无效，也就是说，如果父元素没有设定高度或者不是“格式化高度”，那么relative类似top:20%的代码等同于top:0。</p>
</blockquote>
<blockquote>
<p>（3）当相对定位元素同时应用对立方向定位值的时候，也就是top/bottom和left/right同时使用的时候，只有一个方向的定位属性会起作用。而谁起作用则是与文档流的顺序有关的，默认的文档流是自上而下、从左往右，因此top/bottom同时使用的时候，bottom失效；left/right同时使用的时候，right失效。</p>
</blockquote>
<h2 id="87-什么是层叠上下文？"><a href="#87-什么是层叠上下文？" class="headerlink" title="87.什么是层叠上下文？"></a>87.什么是层叠上下文？</h2><blockquote>
<p>层叠上下文，英文称作stackingcontext，是HTML中的一个三维的概念。如果一个元素含有层叠上下文，我们可以理解为这个元素在z轴上就“高人一等”。</p>
</blockquote>
<p>层叠上下文元素有如下特性：</p>
<blockquote>
<p>（1）层叠上下文的层叠水平要比普通元素高（原因后面会说明）。<br>（2）层叠上下文可以阻断元素的混合模式。<br>（3）层叠上下文可以嵌套，内部层叠上下文及其所有子元素均受制于外部的“层叠上下文”。<br>（4）每个层叠上下文和兄弟元素独立，也就是说，当进行层叠变化或渲染的时候，只需要考虑后代元素。<br>（5）每个层叠上下文是自成体系的，当元素发生层叠的时候，整个元素被认为是在父层叠上下文的层叠顺序中。</p>
</blockquote>
<p>层叠上下文的创建：</p>
<blockquote>
<p>（1）页面根元素天生具有层叠上下文，称为根层叠上下文。根层叠上下文指的是页面根元素，可以看成是<code>&lt;html&gt;</code>元素。因此，页面中所有的元素一定处于至少一个“层叠结界”中。</p>
</blockquote>
<blockquote>
<p>（2）对于position值为relative/absolute以及Firefox/IE浏览器（不包括Chrome浏览器）下含有position:fixed声明的定位元素，当其z-index值不是auto的时候，会创建层叠上下文。Chrome等WebKit内核浏览器下，position:fixed元素天然层叠上下文元素，无须z-index为数值。根据我的测试，目前IE和Firefox仍是老套路。</p>
</blockquote>
<blockquote>
<p>（3）其他一些CSS3属性，比如元素的opacity值不是1。</p>
</blockquote>
<h2 id="88-什么是层叠水平？"><a href="#88-什么是层叠水平？" class="headerlink" title="88.什么是层叠水平？"></a>88.什么是层叠水平？</h2><blockquote>
<p>层叠水平，英文称作stackinglevel，决定了同一个层叠上下文中元素在z轴上的显示顺序。</p>
</blockquote>
<blockquote>
<p>显而易见，所有的元素都有层叠水平，包括层叠上下文元素，也包括普通元素。然而，对普通元素的层叠水平探讨只局限在当前层叠上下文元素中。</p>
</blockquote>
<h2 id="89-元素的层叠顺序？"><a href="#89-元素的层叠顺序？" class="headerlink" title="89.元素的层叠顺序？"></a>89.元素的层叠顺序？</h2><blockquote>
<p>层叠顺序，英文称作 stackingorder，表示元素发生层叠时有着特定的垂直显示顺序。</p>
</blockquote>
<p><img src="https://cavszhouyou-1254093697.cos.ap-chongqing.myqcloud.com/note-15.png" alt="层叠顺序"></p>
<h2 id="90-层叠准则？"><a href="#90-层叠准则？" class="headerlink" title="90.层叠准则？"></a>90.层叠准则？</h2><blockquote>
<p>（1）谁大谁上：当具有明显的层叠水平标识的时候，如生效的z-index属性值，在同一个层叠上下文领域，层叠水平值大的那一个覆盖小的那一个。</p>
</blockquote>
<blockquote>
<p>（2）后来居上：当元素的层叠水平一致、层叠顺序相同的时候，在DOM流中处于后面的元素会覆盖前面的元素。</p>
</blockquote>
<h2 id="91-font-weight-的特殊性？"><a href="#91-font-weight-的特殊性？" class="headerlink" title="91.font-weight 的特殊性？"></a>91.font-weight 的特殊性？</h2><blockquote>
<p>如果使用数值作为font-weight属性值，必须是100～900的整百数。因为这里的数值仅仅是外表长得像数值，实际上是一个具有特定含义的关键字，并且这里的数值关键字和字母关键字之间是有对应关系的。</p>
</blockquote>
<h2 id="92-text-indent-的特殊性？"><a href="#92-text-indent-的特殊性？" class="headerlink" title="92.text-indent 的特殊性？"></a>92.text-indent 的特殊性？</h2><blockquote>
<p>（1）text-indent仅对第一行内联盒子内容有效。</p>
</blockquote>
<blockquote>
<p>（2）非替换元素以外的display计算值为inline的内联元素设置text-indent值无效，如果计算值inline-block/inline-table则会生效。</p>
</blockquote>
<blockquote>
<p>（3）<code>&lt;input&gt;</code>标签按钮text-indent值无效。</p>
</blockquote>
<blockquote>
<p>（4）<code>&lt;button&gt;</code>标签按钮text-indent值有效。</p>
</blockquote>
<blockquote>
<p>（5）text-indent的百分比值是相对于当前元素的“包含块”计算的，而不是当前元素。</p>
</blockquote>
<h2 id="93-letter-spacing-与字符间距"><a href="#93-letter-spacing-与字符间距" class="headerlink" title="93.letter-spacing 与字符间距"></a>93.letter-spacing 与字符间距</h2><blockquote>
<p>letter-spacing可以用来控制字符之间的间距，这里说的“字符”包括英文字母、汉字以及空格等。</p>
</blockquote>
<p>letter-spacing具有以下一些特性。</p>
<blockquote>
<p>（1）继承性。<br>（2）默认值是normal而不是0。虽然说正常情况下，normal的计算值就是0，但两者还是有差别的，在有些场景下，letter-spacing会调整normal的计算值以实现更好的版面布局。<br>（3）支持负值，且值足够大的时候，会让字符形成重叠，甚至反向排列。<br>（4）和text-indent属性一样，无论值多大或多小，第一行一定会保留至少一个字符。<br>（5）支持小数值，即使0.1px也是支持的。<br>（6）暂不支持百分比值。</p>
</blockquote>
<h2 id="94-word-spacing-与单词间距？"><a href="#94-word-spacing-与单词间距？" class="headerlink" title="94.word-spacing 与单词间距？"></a>94.word-spacing 与单词间距？</h2><blockquote>
<p>letter-spacing作用于所有字符，但word-spacing仅作用于空格字符。换句话说，word-spacing的作用就是增加空格的间隙宽度。</p>
</blockquote>
<h2 id="95-white-space-与换行和空格的控制？"><a href="#95-white-space-与换行和空格的控制？" class="headerlink" title="95.white-space 与换行和空格的控制？"></a>95.white-space 与换行和空格的控制？</h2><p>white-space属性声明了如何处理元素内的空白字符，这类空白字符包括Space（空格）键、Enter（回车）键、Tab（制表符）键产生的空白。因此，white-space可以决定图文内容是否在一行显示（回车空格是否生效），是否显示大段连续空白（空格是否生效）等。</p>
<p>其属性值包括下面这些。</p>
<blockquote>
<p>•normal：合并空白字符和换行符。<br>•pre：空白字符不合并，并且内容只在有换行符的地方换行。<br>•nowrap：该值和normal一样会合并空白字符，但不允许文本环绕。<br>•pre-wrap：空白字符不合并，并且内容只在有换行符的地方换行，同时允许文本环绕。<br>•pre-line：合并空白字符，但只在有换行符的地方换行，允许文本环绕。</p>
</blockquote>
<h2 id="96-隐藏元素的-background-image-到底加不加载？"><a href="#96-隐藏元素的-background-image-到底加不加载？" class="headerlink" title="96.隐藏元素的 background-image 到底加不加载？"></a>96.隐藏元素的 background-image 到底加不加载？</h2><p>-（1）元素的背景图片</p>
<blockquote>
<p>元素本身设置 display:none，会请求图片<br>父级元素设置 display:none，不会请求图片<br>样式没有元素使用，不会请求<br>:hover 样式下，触发时请求</p>
</blockquote>
<p>-（2）img </p>
<blockquote>
<p>标签图片任何情况下都会请求图片</p>
</blockquote>
<h2 id="97-如何实现单行／多行文本溢出的省略（…）？"><a href="#97-如何实现单行／多行文本溢出的省略（…）？" class="headerlink" title="97.如何实现单行／多行文本溢出的省略（…）？"></a>97.如何实现单行／多行文本溢出的省略（…）？</h2><figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">/*单行文本溢出*/</span></span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="comment">/*多行文本溢出*/</span></span><br><span class="line"><span class="selector-tag">p</span> &#123;</span><br><span class="line">  <span class="attribute">position</span>: relative;</span><br><span class="line">  <span class="attribute">line-height</span>: <span class="number">1.5em</span>;</span><br><span class="line">  <span class="comment">/*高度为需要显示的行数*行高，比如这里我们显示两行，则为3*/</span></span><br><span class="line">  <span class="attribute">height</span>: <span class="number">3em</span>;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">&#125;</span><br><span class="line"></span><br><span class="line"><span class="selector-tag">p</span><span class="selector-pseudo">:after</span> &#123;</span><br><span class="line">  <span class="attribute">content</span>: <span class="string">"..."</span>;</span><br><span class="line">  <span class="attribute">position</span>: absolute;</span><br><span class="line">  <span class="attribute">bottom</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">right</span>: <span class="number">0</span>;</span><br><span class="line">  <span class="attribute">background-color</span>: <span class="number">#fff</span>;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="98-常见的元素隐藏方式？"><a href="#98-常见的元素隐藏方式？" class="headerlink" title="98.常见的元素隐藏方式？"></a>98.常见的元素隐藏方式？</h2><p>-（1）使用 display:none;隐藏元素，渲染树不会包含该渲染对象，因此该元素不会在页面中占据位置，也不会响应绑定的监听事件。</p>
<p>-（2）使用 visibility:hidden;隐藏元素。元素在页面中仍占据空间，但是不会响应绑定的监听事件。</p>
<p>-（3）使用 opacity:0;将元素的透明度设置为 0，以此来实现元素的隐藏。元素在页面中仍然占据空间，并且能够响应元素绑定的监听事件。</p>
<p>-（4）通过使用绝对定位将元素移除可视区域内，以此来实现元素的隐藏。</p>
<p>-（5）通过 z-index 负值，来使其他元素遮盖住该元素，以此来实现隐藏。</p>
<p>-（6）通过 clip/clip-path 元素裁剪的方法来实现元素的隐藏，这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。</p>
<p>-（7）通过 transform:scale(0,0)来将元素缩放为 0，以此来实现元素的隐藏。这种方法下，元素仍在页面中占据位置，但是不会响应绑定的监听事件。</p>
 
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <div class="declare">
      <ul class="post-copyright">
        <li>
          <i class="ri-copyright-line"></i>
          <strong>Copyright： </strong>
          Copyright is owned by the author. For commercial reprints, please contact the author for authorization. For non-commercial reprints, please indicate the source.
        </li>
      </ul>
    </div>
    
    <footer class="article-footer">
       
<div class="share-btn">
      <span class="share-sns share-outer">
        <i class="ri-share-forward-line"></i>
        分享
      </span>
      <div class="share-wrap">
        <i class="arrow"></i>
        <div class="share-icons">
          
          <a class="weibo share-sns" href="javascript:;" data-type="weibo">
            <i class="ri-weibo-fill"></i>
          </a>
          <a class="weixin share-sns wxFab" href="javascript:;" data-type="weixin">
            <i class="ri-wechat-fill"></i>
          </a>
          <a class="qq share-sns" href="javascript:;" data-type="qq">
            <i class="ri-qq-fill"></i>
          </a>
          <a class="douban share-sns" href="javascript:;" data-type="douban">
            <i class="ri-douban-line"></i>
          </a>
          <!-- <a class="qzone share-sns" href="javascript:;" data-type="qzone">
            <i class="icon icon-qzone"></i>
          </a> -->
          
          <a class="facebook share-sns" href="javascript:;" data-type="facebook">
            <i class="ri-facebook-circle-fill"></i>
          </a>
          <a class="twitter share-sns" href="javascript:;" data-type="twitter">
            <i class="ri-twitter-fill"></i>
          </a>
          <a class="google share-sns" href="javascript:;" data-type="google">
            <i class="ri-google-fill"></i>
          </a>
        </div>
      </div>
</div>

<div class="wx-share-modal">
    <a class="modal-close" href="javascript:;"><i class="ri-close-circle-line"></i></a>
    <p>扫一扫，分享到微信</p>
    <div class="wx-qrcode">
      <img src="" alt="微信分享二维码">
    </div>
</div>

<div id="share-mask"></div>  
    </footer>
  </div>

   
  <nav class="article-nav">
    
      <a href="/2020/03/16/javascript%E5%A4%8D%E4%B9%A0%E6%B1%87%E6%80%BB/" class="article-nav-link">
        <strong class="article-nav-caption">上一篇</strong>
        <div class="article-nav-title">
          
            javascript复习汇总
          
        </div>
      </a>
    
    
      <a href="/2020/03/16/%E9%A6%96%E5%B1%8F%E6%97%B6%E9%97%B4%E5%92%8C%E7%99%BD%E5%B1%8F%E6%97%B6%E9%97%B4/" class="article-nav-link">
        <strong class="article-nav-caption">下一篇</strong>
        <div class="article-nav-title">首屏时间和白屏时间</div>
      </a>
    
  </nav>

   
<!-- valine评论 -->
<div id="vcomments-box">
  <div id="vcomments"></div>
</div>
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/valine@1.4.14/dist/Valine.min.js"></script>
<script>
  new Valine({
    el: "#vcomments",
    app_id: "2eBxdPB3eEwraN7IpwFckzeL-gzGzoHsz",
    app_key: "VGgCefQEluVxHdyMsm1Dpeih",
    path: window.location.pathname,
    avatar: "monsterid",
    placeholder: "评论一下我的文章吧~",
    recordIP: true,
  });
  const infoEle = document.querySelector("#vcomments .info");
  if (infoEle && infoEle.childNodes && infoEle.childNodes.length > 0) {
    infoEle.childNodes.forEach(function (item) {
      item.parentNode.removeChild(item);
    });
  }
</script>
<style>
  #vcomments-box {
    padding: 5px 30px;
  }

  @media screen and (max-width: 800px) {
    #vcomments-box {
      padding: 5px 0px;
    }
  }

  #vcomments-box #vcomments {
    background-color: #fff;
  }

  .v .vlist .vcard .vh {
    padding-right: 20px;
  }

  .v .vlist .vcard {
    padding-left: 10px;
  }
</style>

 
     
</article>

</section>
      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2015-2020
        <i class="ri-heart-fill heart_icon"></i> AURORA_ZXH
      </li>
    </ul>
    <ul>
      <li>
        
        
        
        Powered by <a href="https://hexo.io" target="_blank">Hexo</a>
        <span class="division">|</span>
        Theme - <a href="https://github.com/Shen-Yu/hexo-theme-ayer" target="_blank">Ayer</a>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>Visitors:<span id="busuanzi_value_site_uv"></span></s>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>Views:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>
      <div class="float_btns">
        <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

      </div>
    </main>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/images/avatar.jpg" alt="AURORA"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="http://aurora-zxh.lofter.com/" target="_blank" rel="noopener">随记</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/about">关于我</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/link">友链</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="Search">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <script>
      if (window.matchMedia("(max-width: 768px)").matches) {
        document.querySelector('.content').classList.remove('on');
        document.querySelector('.sidebar').classList.remove('on');
      }
    </script>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/images/alipay.png">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/images/wxpay.png">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-2.0.3.min.js"></script>


<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->


<script src="/js/tocbot.min.js"></script>

<script>
  tocbot.init({
    tocSelector: '.tocbot',
    contentSelector: '.article-entry',
    headingSelector: 'h1, h2, h3, h4, h5, h6',
    hasInnerContainers: true,
    scrollSmooth: true,
    scrollContainer: 'main',
    positionFixedSelector: '.tocbot',
    positionFixedClass: 'is-position-fixed',
    fixedSidebarOffset: 'auto'
  });
</script>

<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css">
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->

<!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script>

<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->


<script src="/js/busuanzi-2.3.pure.min.js"></script>


<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->

<!-- CodeCopy -->


<link rel="stylesheet" href="/css/clipboard.css">

<script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  function wait(callback, seconds) {
    var timelag = null;
    timelag = window.setTimeout(callback, seconds);
  }
  !function (e, t, a) {
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      $(".article pre code").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        let $btn = $(e.trigger);
        $btn.addClass('copied');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-checkbox-circle-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPIED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-checkbox-circle-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
      clipboard.on('error', function(e) {
        e.clearSelection();
        let $btn = $(e.trigger);
        $btn.addClass('copy-failed');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-time-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPY FAILED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-time-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
    }
    initCopyCode();
  }(window, document);
</script>


<!-- CanvasBackground -->


    
  </div>
</body>

</html>